Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2018, 14:13
Новичок на форуме
Отправить личное сообщение для ildar94 Посмотреть профиль Найти все сообщения от ildar94
 
Регистрация: 16.01.2018
Сообщений: 4

вкладки и слайдер slicks
Всем Драсте)) Есть задача сделать вкладки и при клике на разные вкладки чтобы менялись данные слайдера.
Нашёл скрипт в нете, все работает слайдеры меняются, но при нажатии на вкладку, слайдер отображается не корректно, видно на второй картинке. Если пролистать слайдер то получается фигня как на третей картинке. Если пролистать раза три то слайдер работает как нужно (первая картинка).
tabs_box имеет размер 1200 как и слайдер, есть медиа запросы на уменьшение размера в зависимости от размера окна

Код:
 <div class="tabs_box">
                    <ul class="tabs__menu">
                     <li class="tabs active"><a href="#" >диваны</a></li>
                     <li class="tabs"><a href="#">углы</a></li>
                     <li class="tabs"><a href="#">кровати</a></li>
                     <li class="tabs"><a href="#">шкафы</a></li>
                     <li class="tabs"><a href="#">стенки</a></li>
                     <li class="tabs"><a href="#">столы и стулья</a></li>
                    </ul>

            <div id="tab1" class="sl">
                <div class="sl__slide">
                    <img src="img/product/sl1.jpg" alt="Картинка слайдера 1" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl2.jpg" alt="Картинка слайдера 2" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl3.jpg" alt="Картинка слайдера 3" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl4.jpg" alt="Картинка слайдера 4" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl5.jpg" alt="Картинка слайдера 5" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl6.jpg" alt="Картинка слайдера 6" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl7.jpg" alt="Картинка слайдера 7" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl8.jpg" alt="Картинка слайдера 8" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl9.jpg" alt="Картинка слайдера 9" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
                <div class="sl__slide">
                    <img src="img/product/sl10.jpg" alt="Картинка слайдера 10" class="sl__img">
                    <!--<div class="sl_text">-->
                    <h3 class="sl__title">Название мебели</h3>
                    <p class="sl__desc">характеристики мебели</p>
                    <!--</div>-->
                </div>
            </div>


Код:
  $(".sl").not(":first").hide();
    $(".tabs_box .tabs").click(function() {
        $(".tabs_box .tabs").removeClass("active").eq($(this).index()).addClass("active");
        $(".sl").hide().eq($(this).index()).fadeIn()
    }).eq(0).addClass("active");


Код:
@media (max-width: 1024px) {
      .sl {max-width: 900px;}
      .tabs_box {max-width: 901px;}

    }
    @media (max-width: 480px) {
      .sl {max-width: 300px;}
      .tabs_box {max-width: 301px;}

Код:
 $('.sl').slick({
        rows: 2,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        adaptiveHeight: true,
        responsive: [

            {
                breakpoint: 1024,
                settings: {
                    rows: 1,
                    arrows: false,
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    adaptiveHeight: true
                }
            },{
                breakpoint: 370,
                settings: {
                    rows: 1,
                    arrows: false,
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    infinite: true,
                    adaptiveHeight: true
                }
            }]

    });
Изображения:
Тип файла: jpg Vqr4QhT4elI.jpg (154.3 Кб, 4 просмотров)
Тип файла: jpg 2.jpg (87.7 Кб, 4 просмотров)
Тип файла: jpg 3.jpg (154.2 Кб, 4 просмотров)
Тип файла: jpg 3,1.jpg (190.2 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2018, 14:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от ildar94
$(".sl").not(":first").hide();
поставить после $('.sl').slick
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2018, 14:48
Новичок на форуме
Отправить личное сообщение для ildar94 Посмотреть профиль Найти все сообщения от ildar94
 
Регистрация: 16.01.2018
Сообщений: 4

попробовал, поломался слайдер
Изображения:
Тип файла: jpg FMt8dbf0K-c.jpg (127.5 Кб, 2 просмотров)
Ответить с цитированием
  #4 (permalink)  
Старый 16.01.2018, 14:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ildar94,
добавьте красное, вдруг поможет.
$(".tabs_box .tabs").click(function() {$(window).trigger("resize");
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2018, 15:07
Новичок на форуме
Отправить личное сообщение для ildar94 Посмотреть профиль Найти все сообщения от ildar94
 
Регистрация: 16.01.2018
Сообщений: 4

ничего не изменилось, пробовал убрать правило для мобилки и медиа запросы, тоже не помогает
Ответить с цитированием
  #6 (permalink)  
Старый 16.01.2018, 15:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ildar94,
нужен размер картинок, блоки скрыты размера нет , есть три способа решения
1.скрывать блоки после загрузки картинок и инициализации слайдеров.
2.включать подстроку размеров после клика по табу trigger("resize"); или встроенное api слайдера.
3. прописать размеры картинок в css.
Ответить с цитированием
  #7 (permalink)  
Старый 16.01.2018, 15:29
Новичок на форуме
Отправить личное сообщение для ildar94 Посмотреть профиль Найти все сообщения от ildar94
 
Регистрация: 16.01.2018
Сообщений: 4

Код:
.sl {
        max-width: 1200px;
        height: auto;
        .sl__img {
          width: 300px;
          height: 300px;
        }
        .sl__title {
          color: #363636;
          font-family: "Open Sans", 'serif';
          font-size: 16px;
          font-weight: 400;
          line-height: 43px;
          text-align: center;
        }

        .sl__desc {
          color: #363636;
          font-family: "Open Sans", 'serif';
          font-size: 16px;
          font-weight: 400;
          line-height: 43px;
          text-align: center;
          display: none;
        }
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поместить слайдер в модальное окно? ИщуПомощь Элементы интерфейса 2 24.08.2017 20:27
Слайдер с помощью CSS и jQuery - 1000 р. stixia007 jQuery 21 27.03.2013 22:44
Динамические вкладки Tmin10 jQuery 2 07.03.2012 10:48
jquery слайдер, анимация при переключении вкладки KiTaeZa Events/DOM/Window 1 05.09.2011 20:52
IE, как сохранить вкладки Fly_ Internet Explorer 6 03.05.2010 16:00