slider of several items

Question

slider of several items

Navigation

#1 by (1 votes)

1

I have this code

  .categoria-slider {
  position: relative;
  width: 100%;
  height: 300px;
  padding-left: 8%;
  box-sizing: border-box;
  overflow: hidden;
}

.categoria-slider .item {
  float: left;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 3%;
  width: 255px;
  height: 200px;
  overflow: hidden;
}

.categoria-slider h1 {
  font-family: "Open Sans";
  font-weight: bold;
  color: #000;
}

.item img {
  width: 100%;
  height: 100%;
}

.description {
  position: relative;
  width: 100%;
  height: 12%;
  top: -12%;
  background: #29252c;
  text-align: center;
}

.description a {
  color: #fff;

<div class="categoria-slider">
  <h1>Categorías</h1>
  <div class="item">
    <img src="img/categoria.jpg" alt="">
    <div class="description">
      <a href="#">Categoria</a>
    </div>
  </div>
  <div class="item">
    <img src="img/categoria.jpg" alt="">
    <div class="description">
      <a href="#">Categoria</a>
    </div>
  </div>
  <div class="item">
    <img src="img/categoria.jpg" alt="">
    <div class="description">
      <a href="#">Categoria</a>
    </div>
  </div>
  <div class="item">
    <img src="img/categoria.jpg" alt="">
    <div class="description">
      <a href="#">Categoria</a>
    </div>
  </div>
  <div class="item">
    <img src="img/categoria.jpg" alt="">
    <div class="description">
      <a href="#">Categoria</a>
    </div>
  </div>
</div>

I am trying to make a slider in such a way that if I put some arrows to the sides using jquery to the click event to give an animation with the attribute of css

position:relative;
left: -255px;

but when using the inspector I see that the fourth item is underneath only that it is not seen, but I would like it to appear on the right side and give that feeling of slide

thanks in advance

jquery html css

asked by ragnamex 19.11.2018 в 00:21

source

1 answer

Restart in cycle for php decode json received via _POST

score 1 · Answer 1

You are missing a DIV that encompasses all sliders.

What happens to you now is that:

.category-slider .item = 255px

Therefore, when the screen measures we are going to put 900px, fit 3 in line and the fourth no longer, and it goes to the next row, that's why you see it below.

This is solved very easy, put a div between:

.category-slider and .category-slider .item that has the width for example of the 4 div containing (255 * 4) of fotma that:

.categoria-slider .box { float: left: width: 1020px height: 200px; }

Remember that now what you have to move is this new block, not the inside items ok?

EDIT: I just saw that your main DIV has a witdh of 100%, if you are going to work with%, the items have to have a 25% witdh, and the path in each click has to be -100%. (This is a bit complicated to understand the first few times so I recommend you if you are starting at the main DIV you take 100% off and put a size in PX to make the example work well and then you search with% that also will be valid for mobile phones and other responsive themes.