Как сделать бесконечную горизонтальную прокрутку элементов списка (li) - PullRequest
Новая
       9

Как сделать бесконечную горизонтальную прокрутку элементов списка (li)

0 голосов
/ 07 ноября 2019

Я хочу добиться, чтобы элементы в списке продолжали прокручивать даже последний элемент в обоих направлениях. т.е.: пусть он продолжит прокрутку, начиная с первого ИЛИ последнего элемента, снова и снова. Я разработал HTML и CSS, но не знаю, какой метод использовать в js / jquery. Буду очень признателен за любую помощь или хороший указатель. Вот HTML 

<html>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img 
class="img-thumbnail" 
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1" >
                                     </a>
</li>
<li>
  <a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img 
class="img-thumbnail" 
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
                                    </a>
</li>
<li>
  <a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img 
class="img-thumbnail" 
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
                                    </a>
</li>
 ...........
</ul>
</div> </html>

И CSS используется очень просто для примера: 

.container{
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin:10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;

}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}

Теперь использовать функцию Js - вот где я застрял.

Вот ссылка FIDDLE

1 Ответ

3 голосов
/ 07 ноября 2019

Итак, вы ищете что-то вроде этого: - 

var bgWidth = 350; //Max-width of <li> you would like to set.
var scrollPos = Math.ceil($('body').width() / 20);
$(document).ready(function() {
  $('body').width(bgWidth + $(window).width());
  $(window).scroll(function() {
    if ($(window).scrollLeft() >= ($('body').width() - $(window).width())) {
      $(window).scrollLeft(1 + scrollPos / 4);
    } else if ($(window).scrollLeft() == 0) {
      $(window).scrollLeft($('body').width() - $(window).width() - scrollPos / 4);
    }
  });
});
$(window).resize(function() {
  $('body').width(bgWidth + $(window).width());
});
.container {
  max-width: 100%;
}

.horscroll {
  display: -webkit-inline-box;
  width: 100%;
  overflow: auto;
  margin: 10px;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.img-thumbnail {
  margin: 5px 5px 0px 5px;
  border: 1px solid #;
  border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <ul class="horscroll" id="autoscrollR">
    <li>
      <a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1">
      </a>
    </li>
    <li>
      <a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
      </a>
    </li>
    <li>
      <a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
      </a>
    </li>
    <li>
      <a href="#myGallery3 " data-slide-to="2 " data-tooltip="asaba "><img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=4 "></a>
    </li>

    <li>
      <a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=5">
      </a>
    </li>
    <li>
      <a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=6">
      </a>
    </li>
    <li>
      <a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=7">
      </a>
    </li>
    <li>
      <a href="#myGallery3 " data-slide-to="2 " data-tooltip="asaba "><img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=8 "></a>
    </li>
  </ul>
</div>

Надеюсь, это поможет вам!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...