КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Классный адаптивный jQuery-слайдер

jR3DCarousel-с

Установка и подключение

Как всегда, подключаем normalize.css, jQuery, сам файл плагина jR3DCarousel, style.css и prefixfree.js.
Заодно покажу некоторые приколы. Выведем четыре блока с картинками и применим к ним метод jR3DCarousel одноимённого плагина.
  <?php
    $images = glob("images/1*.png");// получим массив из путей к картинкам в папке images
     
    // применим цикл for для вывода четырёх division с разными классами
    for($i = 0; $i < 4; $i++){
      echo '<div class="jR3DCarouselGallery'.$i.'">';
      // и также выведем все картинки в блоке .jR3DCarouselCustomSlide, обернув их в ссылку 
      foreach($images as $img){
        echo '<div class="jR3DCarouselCustomSlide">
                <a href="#"><img src="'.$img.'" /></a>
                <!-- .captions - для текстового описания, я его скрыл в css -->
                <div class="captions">This is custom text slide 1</div>
              </div>';
      }
      echo '</div>';
    }
  ?>
  
  /* js-код */
  "use strict";
  
  $(document).ready(function(){
    
    var width = $(".jR3DCarouselGallery0").width(),
      effects = ['slide3D', 'slide', 'scroll', 'scroll3D'],
      effect = getRandElFromArray(effects), // всё равно потом заменится, это чисто для примера
      perspective, i;
    
    var carouselCustomeTemplateProps =  {
      width: width, /* наибольшая разрешенная ширина */
      height: width*0.6, /* наибольшая разрешенная высота */
      slideLayout : 'cover', /* «contain» (соответствует формату), «fill» (растягивает объект для заполнения) и «cover» (переполняет окно, но поддерживает соотношение) */
      animation: effect, // эффект анимации
      animationCurve: 'ease', // linear, ease-in-out и т.д.
      animationDuration: 1900, // длительность анимации при смене контента
      animationInterval: 3000, // интервал смены контента
      slideClass: 'jR3DCarouselCustomSlide', // какие блоки анимируем 
      autoplay: true,
      controls: true, /* кнопки «вперёд» и «назад» */
      navigation: '' /* circles | squares | '' */
      perspective: null,
      rotationDirection: 'ltr', // направление «left to right» или наоборот 'rtl'
      onSlideShow: slideShownCallback // функция по завершении смены слайда
    }
      
    function slideShownCallback($slide){
      //console.log("Slide shown: ", $slide.find('img').attr('src'));
    }
    
    // аналогично в цикле пройдёмся по всем эффектам
    for(i = 0; i < effects.length; i++){
      carouselCustomeTemplateProps.animation = effect = effects[i];
      if(effect == 'slide3D'){
        // тут желательно применить перспективу
        carouselCustomeTemplateProps.perspective = width*3;
      }else if(effect == 'scroll3D'){
        carouselCustomeTemplateProps.perspective = width*2;
      }else{
        carouselCustomeTemplateProps.perspective = 0;
      }
      
      // вешаем метод с обновлёнными настройками на каждый из четырёх блоков
      $('.jR3DCarouselGallery'+i).jR3DCarousel(carouselCustomeTemplateProps); 
    }

  });
  
  // возвращает случайный элемент из массива (если вздумаете так делать, случайные эффекты)
  function getRandElFromArray(arr){
    var max = arr.length - 1,
        rand = Math.floor(Math.random() * (max + 1));
    return arr[rand];
  }

Настройки css

Можно указать ширину блока в процентах, указав !important, только смотрите, если будете давать перспективу, она не будет учитываться в ширине и высоте.
  .container{
    width: 70%;
    margin: auto;
    margin-top: 33px; 
  }
  [class^="jR3DCarouselGallery"]{
    margin: 33px auto 155px auto; /* центрируем карусельку */
    width: 70% !important; /* если не указывать !important, при ресайзе окна растягивается на всю ширину контейнера */
  }
Нашел здесь. Ещё один хороший адаптивный слайдер Slicebox и потрясающий Flux, попробую его сделать адаптивным.
2017.07.24 179
jpgjpg

Сидит программист глубоко в отладке. Подходит сынишка: - Папа, почему солнышко каждый день встает на востоке, а садится на западе? - Ты это проверял? - Проверял. - Хорошо проверял? - Хорошо. - Работает? - Работает. - Каждый день работает? - Да, каждый день. - Тогда ради бога, сынок, ничего не трогай, ничего не меняй.
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика