Carousel of photos - prev next - that does not consider the display: none

Question

Carousel of photos - prev next - that does not consider the display: none

Navigation

#1 by (1 votes)

1

I'm creating a photo carousel. I have a list of several thumbnails but they are only visible 3 at a time. Clicking on one of them is shown below in large and with a text.

My theme is the organization of these three elements:

<p>&lt;</p>
lista de fotos
<p>&gt;</p>

The "button" to move forward positions me at the end of the list even though the photos are not visible ( display:none ). My idea is that the "button" to advance is at the end of the 3 visible photos. In the images, I think it's clearer.

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-opacity-off";
}


var showNumber = 3;
var startPos = 0;
var endPos = showNumber;
var $List = $('ul li');
$List.hide().slice(startPos, endPos).fadeIn();


$('#adelante').click(function() {
  if (endPos < $List.length) {
    startPos = startPos + 1;
    endPos = endPos + 1;
    $List.hide().slice(startPos, endPos).fadeIn();
  }
  return false;
});

$('#atras').click(function() {
  if (startPos > 0) {
    startPos = startPos - 1;
    endPos = endPos - 1;
    $List.hide().slice(startPos, endPos).fadeIn();
  }
  return false;
});

@charset "utf-8";
li {
  list-style-type: none;
}

div.w3-col {
  padding-right: 5px;
}

.mySlides {
  display: none
}

.demo {
  cursor: pointer
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div>
  <a id="atras" href="#" class="prev">&lt;</a>
</div>

<div>
  <ul>
    <!-- Lista de seis fotos -->

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>

    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>
    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>
    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>
    </li>

    <li>
      <div class="w3-col s2">
        <img src="https://public.slidesharecdn.com/images/user-48x48.png">
      </div>
    </li>

  </ul>
  </div>

  <div style="float:left; display:inline-block;">
    <a id="adelante" href="#" class="next">&gt;</a>
  </div>

javascript jquery html css w3.css

asked by Dahiana 08.08.2018 в 21:23

source

1 answer

The SQL query returns 0 data JavaScript: .push is not a function

score 1 · Answer 1

Thank you very much first of all to Alvaro Montoro.

Well, the problem was not such.

For the elements of the list I use boostrap whereby the content is divided into columns. Each li occupied 2 columns. Since the div contained in the list did not say how much it occupied, it used all the space it could, that is, the whole width. Since I had just 6 photos, I thought I considered the ones that were not visible and that is why I placed the forward button so far from the 3 visible photos. The surprise was when I left only 3 photos and it was still happening, it was so I discovered that it was a matter of the container div did not have a certain width, so the div container of the list assigned only 6 columns and each li 4 columns to add 12 which is the default number of columns of the boostrap.

To be more graphic:

Before:

<div> (por defecto tomaba col-12) 
<li col-2>
<li col-2>
<li col-2>
<li col-2>
<li col-2>
<li col-2>
</div>

Now:

<div col-6>
<li col-4>
<li col-4>
<li col-4>
<li col-4>
<li col-4>
<li col-4>
</div>

The li are of 4 columns because as they are only 3 photos visible at the same time, 3 photos of 4 columns gives 12.

Sorry if I was not very neat. I'm a graphic designer and I learn a bit of web design every day.

Thanks and regards, Dahiana