Простой легкий адаптивный слайдер со свайпом на мобильной версии bxSlider

Простой легкий адаптивный слайдер со свайпом на мобильной версии bxSlider

Здравствуйте. В этом огромном разнообразии слайдеров изображений и текста так мало чего-то универсального и легкого в установке. То конфликт скриптов, то нужно подключить огромная кучу этих скриптов, то еще что-то. А еще ведь нужно, чтобы всё это работало в мобильной версии. Я для себя нашел решение - bxSlider. Коротко:

1. В head подлкючаем скрипты и стили

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script>

2. В тело сайта добавляем

<div class="bxslider">
<div><img src="/assets/images/coffee1.jpg" title="Funky roots"></div>
<div><img src="/assets/images/coffee2.jpg" title="The long and winding road"></div>
<div><img src="/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>

Если хотите вот этот слайдер на html странице

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script>
</head>
<body>
<div class="slider">
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>
</body>
</html>

Всё! слайдер работает и свайпиться на мобильных! У меня всё!

Помогла статья? Угости чашечкой кофе =)

Если вы не видите кнопку "Скачать"
отключите блокировщик рекламы

Комментарии ()

    Похожие статьи