😎 » DARYA DLE » Готовые дизайны » Универсальный слайдер для DLE
1 365 0  

Универсальный слайдер для DLE

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

Скачать файл slider.rar [405 b] (cкачиваний: 86)

1. Код самого слайдера:

			<!-- slider -->
			<div class="slider">
				<div class="slide-list"><div class="slide-wrap">
				<!-- * -->
				<div class="slide-item">
				Содержимое слайдера №1	
				</div>
				<!-- * -->
				<div class="slide-item">
				Содержимое слайдера №2	
				</div>
				<!-- * -->
				<div class="slide-item">
				Содержимое слайдера №3	
				</div>
		
				</div></div>
				<s class="prev-slide"><s></s></s><s class="next-slide"><s></s></s>
			</div>
			<!--  /slider --> 


2. Стили слайдера:

/* SLIDER css */
.slider{display:block;  width:100%;  margin:35px auto;  padding:0;  position:relative; }
.slide-list{position:relative;  margin:0 65px;  padding:0; width:calc(100% - 130px );} 
.slide-wrap{width:100%;  position:relative;  left:0px;  top:0;display:flex; flex-flow: row nowrap; justify-content: space-between; } 
.slide-item{ position: relative; transition: all .003s ease;}
.slider::-moz-selection, sliderafish::-moz-selection{ color:#fff;  text-shadow:none; }
.slider::selection, sliderafish::selection{ color:#fff;  text-shadow:none; } 
.prev-slide, .next-slide {width:45px;height: 100%;  display: flex;justify-content: center;align-items: center;position:absolute;top:0;left:0; z-index:33;}
.next-slide {left:auto; right:0;}
.prev-slide > s, .next-slide > s{width:45px; height:175px;display:inline-block; background:url(../images/sprit.png) no-repeat; cursor:pointer; position:absolute; z-index:19;} 
.prev-slide > s{left:3px; background-position:-13px -8px;} 
.next-slide > s{right:3px; background-position:-114px -8px;} 


3. Для работы нужно подключить маленький скриптик, после джиквери, размером 1  кб.

(файлик вверху)

{jsfiles}
<script async type="text/jаvascript" src="js/slider.js"></script> 



Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023