Простой легкий адаптивный слайдер со свайпом на мобильной версии 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>
<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>
Всё! слайдер работает и свайпиться на мобильных! У меня всё!
Комментарии ()