Для модальных окон - arcticModal.
Слайдеры: Wowslider, bxSlider, Slickslider (очень функциональный).
Пример со slickslider.
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
<style>
.slider {
width: 300px;
margin: 40px auto;
}
.slick-prev, .slick-prev:hover, .slick-prev:focus, .slick-next, .slick-next:hover, .slick-next:focus {
background: red;
}
</style>
<div class="slider">
<div class="slider__item">Слайд 1</div>
<div class="slider__item">Слайд 2</div>
<div class="slider__item">Слайд 3</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
});
});
</script>
</body>
</html>
Слайдеры: Wowslider, bxSlider, Slickslider (очень функциональный).
Пример со slickslider.
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
<style>
.slider {
width: 300px;
margin: 40px auto;
}
.slick-prev, .slick-prev:hover, .slick-prev:focus, .slick-next, .slick-next:hover, .slick-next:focus {
background: red;
}
</style>
<div class="slider">
<div class="slider__item">Слайд 1</div>
<div class="slider__item">Слайд 2</div>
<div class="slider__item">Слайд 3</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
});
});
</script>
</body>
</html>
Комментариев нет:
Отправить комментарий