Простой слайдер на CSS3 и jQuery

Разместил: Apocalypse
Опубликовано: 22 октября 2020

Очень простой и лёгкий слайдер на CSS3 и jQuery для вашего сайта

Для начала посмотрите ДЕМО

Установка:

1#: В самый низ вашего CSS вставьте:

.slider-wrapper * {
margin: 0;
box-sizing: border-box;
}
.slider-wrapper {
width: 500px;
height: 335px;
overflow: hidden;
border: 11px solid #242424;
}
.slider-image {
overflow: hidden;
height: 100%;
}
.slider-image img {
max-width: 100%;
vertical-align: middle;
height: 335px;
}
.slider-ready {
display: flex;
transition: transform 0.61s ease-out;
}
.slider-panel-controller {
position: relative;
}
.slider-ctrl {
position: absolute;
width: 35px;
top: 50%;
transform: translateY(-50%);
height: 40px;
display: inline-block;
border-radius: 0;
background: #ffffff;
opacity: 0.8;
z-index: 2;
}
.slider-ctrl:hover {
opacity: 1;
}
.slider-ctrl span {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(187, 187, 187, 0.7);
padding: 0 12px;
}
.slider-ctrl.slider-left-ctrl {
transform: translateY(-50%) rotate(-180deg);
}
.slider-right-ctrl {
right: 0;
}
.slider-left-ctrl {
left: 0;
}

.slider-wrapper * {

margin: 0;

box-sizing: border-box;

}

.slider-wrapper {

width: 500px;

height: 335px;

overflow: hidden;

border: 11px solid #242424;

}

.slider-image {

overflow: hidden;

height: 100%;

}

.slider-image img {

max-width: 100%;

vertical-align: middle;

height: 335px;

}

.slider-ready {

display: flex;

transition: transform 0.61s ease-out;

}

.slider-panel-controller {

position: relative;

}

.slider-ctrl {

position: absolute;

width: 35px;

top: 50%;

transform: translateY(-50%);

height: 40px;

display: inline-block;

border-radius: 0;

background: #ffffff;

opacity: 0.8;

z-index: 2;

}

.slider-ctrl:hover {

opacity: 1;

}

.slider-ctrl span {

position: relative;

display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 100%;

background: rgba(187, 187, 187, 0.7);

padding: 0 12px;

}

.slider-ctrl.slider-left-ctrl {

transform: translateY(-50%) rotate(-180deg);

}

.slider-right-ctrl {

right: 0;

}

.slider-left-ctrl {

left: 0;

}

2#: Следующий код поместите между тегами <body> и </body>:

<div class="slider-wrapper">
<div class="slider-panel-controller">
<a href="" class="slider-left-ctrl slider-ctrl" data-move="left"
><span
><svg
xmlns="http://www.w3.org/2000/svg"
width="17"
height="34"
viewBox="0 0 4.498 8.996"
xmlns:v="https://vecta.io/nano"
>
<defs>
<clipPath id="A">
<path
d="M-10.382 288.865l8.686 8.686 2.224-8.3-8.046-4.645z"
fill="none"
stroke="#000"
stroke-width=".265"
stroke-linejoin="miter"
stroke-opacity="1"
/>
</clipPath>
</defs>
<path
clip-path="url(#A)"
transform="matrix(.707107 .707107 -.707107 .707107 211.67298 -198.685589)"
d="M-9.077 290.362h6.06v6.06h-6.06z"
fill="none"
stroke="#000"
stroke-width=".286"
paint-order="stroke fill markers"
/></svg></span
></a>
<div class="slider-panel">
<div class="slider-image">
<img
src="/img/pexels-photo-1038916.webp"
/>
</div>
<div class="slider-image">
<img
src="/img/pexels-photo-1297611.webp"
/>
</div>
<div class="slider-image">
<img
src="/img/pexels-photo-296735.jpeg"
/>
</div>
<div class="slider-image">
<img
src="/img/pexels-photo-65550.jpeg"
/>
</div>
</div>
<a href="" class="slider-right-ctrl slider-ctrl" data-move="right"
><span
><svg
xmlns="http://www.w3.org/2000/svg"
width="17"
height="34"
viewBox="0 0 4.498 8.996"
xmlns:v="https://vecta.io/nano"
>
<defs>
<clipPath id="A">
<path
d="M-10.382 288.865l8.686 8.686 2.224-8.3-8.046-4.645z"
fill="none"
stroke="#000"
stroke-width=".265"
stroke-linejoin="miter"
stroke-opacity="1"
/>
</clipPath>
</defs>
<path
clip-path="url(#A)"
transform="matrix(.707107 .707107 -.707107 .707107 211.67298 -198.685589)"
d="M-9.077 290.362h6.06v6.06h-6.06z"
fill="none"
stroke="#000"
stroke-width=".286"
paint-order="stroke fill markers"
/></svg></span
></a>
</div>
</div>

<script type="text/javascript">
/*
* @Code:   Fun slider
* @author:   Saif
*   
*/
//Data value for transform
function setDataValue() {
$('.slider-panel .slider-image').each(function (i, j) {
$(this).attr('data-no', i)
})
}
//stlye for transform
function setStyleAttr(totalWidth, EachImageWidth) {
$('.slider-panel').addClass('slider-ready');
$('.slider-panel').outerWidth(totalWidth);
$('.slider-panel .slider-image').outerWidth(totalWidth / EachImageWidth);
}
/* Controls */
function CommonControls(clickCount, slideMoveGap, EachImageWidth) {
$('.slider-ctrl').click(function (e) {
e.preventDefault();
/*
* Left slide move
*/
if ($(this).data('move') == "left" && clickCount > 0) {
var NextVal = 0;
clickCount--;
NextVal = clickCount * -1;
$('.slider-panel').css({
"transform": "translateX(" + (NextVal * slideMoveGap) + "px" + ")"
})
}
/*
* Left slide move
*/
if ($(this).data('move') == "right" && clickCount < EachImageWidth - 1) {
var reverseVal = 0;
clickCount++;
reverseVal = (clickCount * -1);
$('.slider-panel').css({
"transform": "translateX(" + (reverseVal * slideMoveGap) + "px" + ")"
})
}
})
}
$(document).ready(function () {
/* Global vars */
var totalWidth = $('.slider-panel .slider-image').width() * $('.slider-panel .slider-image').length,
EachImageWidth = $('.slider-panel .slider-image').length,
slideMoveGap = totalWidth / EachImageWidth,
clickCount = 0;
/* Global Functions */
setStyleAttr(totalWidth, EachImageWidth);
setDataValue();
/* Controls */
CommonControls(clickCount, slideMoveGap, EachImageWidth);
})
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

<a href="" class="slider-left-ctrl slider-ctrl" data-move="left"

><span

><svg

xmlns="http://www.w3.org/2000/svg"

width="17"

height="34"

viewBox="0 0 4.498 8.996"

xmlns:v="https://vecta.io/nano"

<defs>

<path

d="M-10.382 288.865l8.686 8.686 2.224-8.3-8.046-4.645z"

fill="none"

stroke="#000"

stroke-width=".265"

stroke-linejoin="miter"

stroke-opacity="1"

</clipPath>

</defs>

<path

clip-path="url(#A)"

transform="matrix(.707107 .707107 -.707107 .707107 211.67298 -198.685589)"

d="M-9.077 290.362h6.06v6.06h-6.06z"

fill="none"

stroke="#000"

stroke-width=".286"

paint-order="stroke fill markers"

/></svg></span

></a>

<img

src="/img/pexels-photo-1038916.webp"

</div>

<img

src="/img/pexels-photo-1297611.webp"

</div>

<img

src="/img/pexels-photo-296735.jpeg"

</div>

<img

src="/img/pexels-photo-65550.jpeg"

</div>

<a href="" class="slider-right-ctrl slider-ctrl" data-move="right"

><span

><svg

xmlns="http://www.w3.org/2000/svg"

width="17"

height="34"

viewBox="0 0 4.498 8.996"

xmlns:v="https://vecta.io/nano"

<defs>

<path

d="M-10.382 288.865l8.686 8.686 2.224-8.3-8.046-4.645z"

fill="none"

stroke="#000"

stroke-width=".265"

stroke-linejoin="miter"

stroke-opacity="1"

</clipPath>

</defs>

<path

clip-path="url(#A)"

transform="matrix(.707107 .707107 -.707107 .707107 211.67298 -198.685589)"

d="M-9.077 290.362h6.06v6.06h-6.06z"

fill="none"

stroke="#000"

stroke-width=".286"

paint-order="stroke fill markers"

/></svg></span

></a>

</div>

* @Code: Fun slider

* @author: Saif

//Data value for transform

function setDataValue() {

$('.slider-panel .slider-image').each(function (i, j) {

$(this).attr('data-no', i)

})

}

//stlye for transform

function setStyleAttr(totalWidth, EachImageWidth) {

$('.slider-panel').addClass('slider-ready');

$('.slider-panel').outerWidth(totalWidth);

$('.slider-panel .slider-image').outerWidth(totalWidth / EachImageWidth);

}

/* Controls */

function CommonControls(clickCount, slideMoveGap, EachImageWidth) {

$('.slider-ctrl').click(function (e) {

e.preventDefault();

* Left slide move

if ($(this).data('move') == "left" && clickCount > 0) {

var NextVal = 0;

clickCount--;

NextVal = clickCount * -1;

$('.slider-panel').css({

"transform": "translateX(" + (NextVal * slideMoveGap) + "px" + ")"

})

}

* Left slide move

if ($(this).data('move') == "right" && clickCount < EachImageWidth - 1) {

var reverseVal = 0;

clickCount++;

reverseVal = (clickCount * -1);

$('.slider-panel').css({

"transform": "translateX(" + (reverseVal * slideMoveGap) + "px" + ")"

})

}

})

}

$(document).ready(function () {

/* Global vars */

var totalWidth = $('.slider-panel .slider-image').width() * $('.slider-panel .slider-image').length,

EachImageWidth = $('.slider-panel .slider-image').length,

slideMoveGap = totalWidth / EachImageWidth,

clickCount = 0;

/* Global Functions */

setStyleAttr(totalWidth, EachImageWidth);

setDataValue();

/* Controls */

CommonControls(clickCount, slideMoveGap, EachImageWidth);

})

</script>

Метки: CSS CSS33 jQuery Slider SVG Слайдер

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Простой слайдер на CSS3 и jQuery

Читайте также:

Посетители сайта

Панель управления

Июнь 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Простой слайдер на CSS3 и jQuery

Читайте также:

Тёмное вертикальное меню-аккордеон на jQuery

Летающие частицы чезез плагин jQuery Firefly

Простые модальные окна с разными эффектами на CSS3, SVG и jQuery

Посетители сайта

Панель управления