Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Верстка слайдера с табами. 
:(
    Опции темы
bigturtle
Дата 27.11.2015, 12:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 78
Регистрация: 27.1.2009

Репутация: нет
Всего: нет



Добрый день. Нужно сверстать слайдер с табами. В качестве табов взято 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>
.....


Проблема, то при переключении табов  изображения плывут и начинают работать когда сладер начинает их двигать. Насколько понимаю нужно его нужно инициализировать при переключении как это лучше сделать? спасибо.
PM MAIL   Вверх
Google
  Дата 19.10.2018, 15:26 (ссылка)  





  Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0517 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.