Форум

malsyst · #1 (**permalink**) 01.09.2013, 23:09

Доброго времени суток!
Имеется слайдер на основе bxSlider вот такого типа:
http://bxslider.com/examples/thumbnail-pager-1
Подскажите, пожалуйста, как реализовать переход по слайдам с помощью превьюшек без участия data-slide-index? Всем спасибо.

Подскажите, пожалуйста, как можно передать ссылку через HTML, а не location.href =?

рони · #2 (**permalink**) 01.09.2013, 23:33

malsyst,
а чуть ниже кнопку нажать на метод 2
http://bxslider.com/examples/thumbnail-pager-2
или он тоже неподходит тогда ваш код покажите?

malsyst · #3 (**permalink**) 01.09.2013, 23:38

Дело в том, что имеется ряд:
<div id="bx-pager">
<a href=""><img src="/images/thumbs/tree_root.jpg" /></a>
<a href=""><img src="/images/thumbs/houses.jpg" /></a>
<a href=""><img src="/images/thumbs/hill_fence.jpg" /></a>
</div>.
Ссылки генерируются автоматически и прописать data-slide-index не получается(

рони · #4 (**permalink**) 02.09.2013, 00:32

malsyst,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
  <style type="text/css">
  .bx-wrapper .bx-pager {
    bottom: -95px;
  }

  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
  }

  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #5280DD 1px;
  }

  .bx-wrapper {
    margin-bottom: 120px;
  }
</style>

  <script>
  $(function () {
      $('#bx-pager a')
          .each(function (i, el) {
              $(el)
                  .attr({
                      'data-slide-index': i
                  })
                  .mouseenter(function () {
                      slider.goToSlide(i);
                  })
          }).click(function () {
                       location.href = "http://javascript.ru/forum/"
                  });
      var slider = $('.bxslider')
          .bxSlider({
              pagerCustom: '#bx-pager'
          });
  }) </script>
</head>

<body>
<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>

<div id="bx-pager">
  <a  href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
  <a  href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
  <a  href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</body>
</html>

malsyst · #5 (**permalink**) 02.09.2013, 00:38

рони, спасибо.

malsyst · #6 (**permalink**) 05.09.2013, 00:10

рони, подскажите, пожалуйста, как можно передать ссылку через HTML, а не location.href =?

рони · #7 (**permalink**) 05.09.2013, 01:22

malsyst,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
  <link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
  <script>
  $(function () {
      $('#bx-pager a')
          .each(function (i, el) {
              $(el).mouseenter(function () {
                      slider.goToSlide(i);
                  })
          })
      var slider = $('.bxslider')
          .bxSlider({pager : false,controls : false});
  })
  </script>
</head>

<body>
<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>

<div id="bx-pager">
  <a  href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
  <a  href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
  <a  href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</body>
</html>

zerofx · #8 (**permalink**) 20.11.2014, 12:50

Привет Рони - все бы понятно, но есть вопросы. Я использую этот метод - Thumbnail pager - method 1, также использую автостарт, но я заметим - что при клике по миниатюре - слайдер чере 4-5 сек остается на месте .. то есть не стартует автоматически .. а если не трогать - то он стартует и меняет слайды нормально.

что может быть не так?

вот те опции которые я использую

<script>
            $(document).ready(function(){
              $('.bxslider').bxSlider(
                    {   
                        auto: true,
                        autoStart:true,
                        infiniteLoop: true,
                        autoHover: true,
                        autoControls: false,
                        controls: false,
                        responsive: false,
                        speed: 800,
                        slideWidth:564,
                        slideHeight:312,
                        pagerCustom: '#bx-pager'
                    }
                );
            });
        </script>

zerofx · #9 (**permalink**) 20.11.2014, 13:04

вот робочий пример...

http://авторазборка.org/rj/dors/tmp/slider/

рони · #10 (**permalink**) 20.11.2014, 13:40

zerofx,

строки 12-14

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
    <link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
    <script>
        $(function() {
            $('#bx-pager a').mouseleave(function() {
                slider.startAuto();
            })

            var slider = $('.bxslider')
                .bxSlider({
                    auto: true,
                    autoStart: true,
                    infiniteLoop: true,
                    autoHover: true,
                    autoControls: false,
                    controls: false,
                    responsive: false,
                    speed: 800,
                    slideWidth: 564,
                    slideHeight: 312,
                    pagerCustom: '#bx-pager'
                });
        })
    </script>
</head>

<body>
    <ul class="bxslider">
        <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" />
        </li>
        <li><img src="http://bxslider.com/images/730_200/houses.jpg" />
        </li>
        <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
        </li>
    </ul>

    <div id="bx-pager">
        <a data-slide-index="0" href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/tree_root.jpg" />
        </a>
        <a data-slide-index="1" href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/houses.jpg" />
        </a>
        <a data-slide-index="2" href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" />
        </a>
    </div>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript