Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Как сделать слайдер для сайта

Хотелось бы поделится прекрасным слайдером на Jquery, очень функциональный, простой в применении, адаптивный… и т.д. Плагин отлично дружит с Touch-устройствами, и позволяет нам демонстрировать практически любой HTML-контент. В этом уроке я расскажу вам как, применить его к на своем сайте и настроить основные возможности.

Сейчас все чаще и чаще на страницах многих сайтов можно увидеть, всевозможные слайдеры, в которых люди выставляют свои топовые товары, туристические фирмы лучшие места для отдыха и т.д. И это очень удобное средство, которое можно применять на свеем сайте, без каких либо сложностей. В интернете можно найти огромное количество вариантов решения для создания слайдера на сайте, я бы вам хотел показать на практическом примере один из наиболее понравившихся мне.

Для начала скачайте архив с скриптом, затем распаковываем его и вот что мы видим:

Состав архива со слайдером

Здесь есть две папки которые вам необходимо переместить в корень своего сайта для того чтобы данный слайдер работал и три файла примера реализации данного скрипта, их нам переносить не нужно из них мы будем брать только код. Вы так же можете сразу открыть эти файлы и посмотреть какой вариант слайдера вам необходим.

А варианта у нас три первый вариант это слайдер изображений в котором у нас представлены очень интересные птички:

Первый вариант слайдера

Следующий вариант который вы можете реализовать на своем сайте это блоки вот как это выглядит в образце:

 вариант слайдера

И последний это как бы единичный слайдер, изображения в нем у нас можно менять одно большое изображение и соответственно вот как это выглядит:

Третий вариант слайдера

Теперь мы увидели как это выглядит теперь пора заглянуть во внутрь и понять как это работает, и как мы можем изменить его для себя. Давайте пойдем по порядку и рассмотрим сначала код первого слайдера из файла images.html

<!DOCTYPE html>
<html lang="en">
<head>
<link href="assets/css/bootstrapTheme.css" rel="stylesheet">
    <link href="assets/css/custom.css" rel="stylesheet">
<link href="owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="owl-carousel/owl.theme.css" rel="stylesheet">
  </head>
  <body>
      <div id="demo">
        <div class="container">
          <div class="row">
            <div class="span12">
              <div id="owl-demo" class="owl-carousel">
                <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>                 <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
              </div>
            </div>
          </div>
        </div>
    </div>
    <script src="assets/js/jquery-1.9.1.min.js"></script>
    <script src="owl-carousel/owl.carousel.js"></script>
    <style>
    #owl-demo .item{
        margin: 3px;
    }
    #owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
    }
    </style>
    <script>
    $(document).ready(function() {
      $("#owl-demo").owlCarousel({
        autoPlay: 3000,
        items : 4,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
      });
    });
    </script>
  </body>
</html>

Итак первое что нам здесь интересно это таблицы стилей их вы обязательно должны дабавить на ту страницу на которой будет слайдер в нашем случае их четыре:

<link href="assets/css/bootstrapTheme.css" rel="stylesheet">
    <link href="assets/css/custom.css" rel="stylesheet">
<link href="owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="owl-carousel/owl.theme.css" rel="stylesheet">

Добавляем себе в тег <head> и идем дальше, в том месте где вы хотите вставить данный слайдер просто копируйте код из этого файла от начала тега <body> и соответственно до его закрытия </body>

Здесь вы можете менять изображения, изменяя следующие строчки:

<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>

Как вы видите изображения хранятся в папке assets вы можете просто добавить туда свои изображения или прописать свою папку, дело ваше, меняем название фалов, атрибут alt и т.д. по порядку все пункты их здесь восемь.

Следующее что вы можете настроить в коде это сам скрипт и код его вы найдете между тегом <script>

$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000,
items : 4,

Здесь мы можем поменять параметр autoPlay у нас он стоит 3000, он отвечает за скорость автоматической прокрутки слайдера, можно сделать медленнее можно быстрее как вам угодно меняйте смотрите. Далее items, это количество изображений выводимых в ленте как наглядно можно увидеть их 4.

Вот собственно и вся настройка, конечно если вы хотите можете понастроить под себя и таблицы стилей, но так как это достаточно индивидуально я не вижу смысла это разбирать.

Следующий у нас блочный слайдер, весь код его я приводить не буду так как он очень похож, а разберем таки те моменты которые наиболее важны и соответственно мы будем менять, открываем код файла blocks.html.

Сами блоки и то что в них написано:

<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
….

Как вы надеюсь уже поняли вместо цифр здесь вы можете писать свой текст, рекомендую заменить тег <h1>на что-нибудь попроще типа <p>, так как вы можете схлопотать санкции от поисковых систем за чрезмерное использование этого тега подробнее можете почитать статью «Поисковый спам», там все подробно описано.

Далее меня сразу не понравился зеленый цвет и я решил таки влезть в таблицу стилей которая собственно расположена в этом же коде, а не в отдельном файле и поправил его:

<style>
    #owl-demo .item{
    background: #3fbf79;
    padding: 30px 0px;
    margin: 10px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    }
   </style>

Меняем параметр background: на тот цвет который вам необходим и соответственно цвет текста под цвет фона параметром color. Теперь давайте посмотрим последний интересный момент он находится между тегом <script>

items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option

Так как слайдер адаптивный то он соответственно и изменяется относительно разрешения экрана, в первой строчке мы видим максимальное количество блоков при разрешении экрана более 1000 px соответственно значение items равно 10, и далее по уменьшению если разрешение от 1000 до 900 то блоков будет 5, от 900 до 600 блоков 3 и менее 600 px блоков будет два, если вас эта градация не устраивает вы можете свободно изменить параметры как вам надо.

И последний слайдер, самый простой в настройке здесь у нас все так же как в первом варианте только изображение будет одно, а вариантов вы можете добавлять сколько вам угодно, единственный момент что параметры скорости смены слайда управляются по другому:

slideSpeed : 300,
paginationSpeed : 400,

Здесь вы можете просто изменять эти цифры экспериментально и найти то, что вам необходимо.

Вот и все, данный урок достаточно простой, но при этом вы получаете очень удобный и функциональный инструмент для сайта, который поможет вам сделать ваш сайт лучше.

Дата публикации:2013-10-08


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget