Dahock Сообщество - Слайдер

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

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

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

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

Для этого все файлы закачайте в Вашу директорию, где хранится Ваш сайт. После этого в index файле Вашего сайта перед закрывающим тегом </head> вставляем следующий код:

 

<link href="css/default.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/mobilyslider.js" type="text/javascript"></script>

<script src="js/init.js" type="text/javascript"></script>

Учтите, очень внимательно отнеситесь к путям к файлам, которые Вы закачали в директорию всего сайта. Я все-таки советую Вам прописать им абсолютный путь во избежании ошибок.

Затем в месте, где мы хотим, чтобы у нас был слайдер пишем следующий код:

 

<script>

$('.slider1').mobilyslider();

</script>

<div class="slider slider1">

<div class="sliderContent">

<div class="item">

<img src="img/img1.jpg" alt="" />

</div>

<div class="item">

<img src="img/img2.jpg" alt="" />

</div>

<div class="item">

<img src="img/img3.jpg" alt="" />

</div>

<div class="item">

<img src="img/img4.jpg" alt="" />

</div>

<div class="item">

<img src="img/img5.jpg" alt="" />

</div>

<div class="item">

<img src="img/img6.jpg" alt="" />

</div>

</div>

</div>

Особое внимание уделите второй строчке нашего кода, так как именно сюда мы вставляем различные вариации нашего слайдера. Для этого внимательно смотрите демо, там есть все коды, которые надо вставить вместо этого, чтобы изменить эффекты смены картинок слайдера.

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

 ​​​​​​​

Задачи 2019
Просмотров: 242
Рейтинг: 3.6

Обновление
Просмотров: 305
Рейтинг: 2.5

Закрыть меню
Боковая Панель Закрыть

 Навигация Основное:

На Музыкальный Сайт  (Музыкальный Сайт на котором эксклюзивное видео и аудиозаписи с RaidCall)

На Кино Сайт    (Кино Сайт где вы найдете мультфильмы,фильмы и шоу а также фильмы от Dahock)

На Хоррор Сайт  (Мистический Сайт где только мрак и тишина любителям мистики)

На Manual Dahock  (Мануал для тех кто попал впервые на Портал)

На XDXKX  (Hard Anime Сайт только +18)

На Газета DHK  (Авторский Информационный Блог)

Каналы:

Ютуб (Основной канал  всегда самое первое видео выходит раньше всего)

Рутуб (Второстепенный канал на русскоязычном портале)

Соц-Сети:

Вконтакте   (В этой группе всегда все самые самые свежие новости а также регулярные новости)

Одноклассники  (Для тех кто не сидит не где кроме Одноклассники)

Фейсбук  (Всемирная соц сеть где выходят не все новости а только отсортированные)

МайлРу  (Редкая группа редко выходят новости и видео для тех кто не любит ничего кроме МайлРу)

Твиттер  (Всегда свежие статейки ссылки и цитаты)

close