Добрый день. Нужно сверстать слайдер с табами. В качестве табов взято jquery-ui, слайдер это slick slider. вот кусок кода | Код |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.devrama.slider.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script async="" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs( );
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.model-slider').slick({
dots: false,
centerMode: true,
slidesToShow: 5,
autoplay: true,
autoplaySpeed: 5000,
prevArrow: '.slick-prev',
nextArrow: '.slick-next',
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 4,
slidesToScroll: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 3,
slidesToScroll: 2
}
},
{
breakpoint: 639,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
centerMode: false,
}
}]
}); });
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#my-slide').DrSlider({
width: 1200,
height: 440,
navigationType: 'circle',
transitionSpeed: 4000,
duration: 8000,
navigationHoverColor: "#ff8969",
navigationColor: "#fe9565"
}); //Yes! that's it!
});
</script>
</head>
<body>
<div class="container-fluid wrapper">
<div class="model row">
<div id="tabs-1" class="model-slider ">
<div class="product"><div><img src="./img/woomen1.jpg">HOT SHORTS<h4>$100</h4> <a
class="plus-button"
href="">ADD TO CART<span
class="plus-button glyphicon glyphicon-plus"></span></a></div></div>
<div class="product"> <div><img src="./img/woomen2.jpg">HOT SHORTS<h4>$100</h4> <a
class="plus-button"
href="">ADD TO CART<span
class="plus-button glyphicon glyphicon-plus"></span></a></div></div>
<div class="product"> <div><img src="./img/woomen3.jpg">HOT SHORTS<h4>$100</h4> <a
class="plus-button"
href="">ADD TO CART<span
class="plus-button glyphicon glyphicon-plus"></span></a></div></div>
<div class="product"> <div><img src="./img/woomen4.jpg">HOT SHORTS<h4>$100</h4> <a
class="plus-button"
href="">ADD TO CART<span
class="plus-button glyphicon glyphicon-plus"></span></a></div></div>
<div class="product"> <div><img src="./img/woomen5.jpg">HOT SHORTS<h4>$100</h4> <a
class="plus-button"
href="">ADD TO CART<span
class="plus-button glyphicon glyphicon-plus"></span></a></div></div>
......
</div>
</div>
<div id="tabs-2" class="model-slider "> ..... </div>
.....
|
Проблема, то при переключении табов изображения плывут и начинают работать когда сладер начинает их двигать. Насколько понимаю нужно его нужно инициализировать при переключении как это лучше сделать? спасибо. |
Верстка слайдера с табами. 
Загрузка ...
