Simple Slider Images

Developer
Hemant Aggarwal
Size
3,348 Kb
Views
4,048
  1. Simple Slider Images Previews
  2. Simple Slider Images HTML Codes
  3. Simple Slider Images CSS Codes
  4. Simple Slider Images JS Codes

How do I make an simple slider images?

What is a simple slider images? How do you make a simple slider images? This script and codes were developed by Hemant Aggarwal on 09 January 2023, Monday.

Simple Slider Images Previews
IQ Test

Simple Slider Images - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Slider Images</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://use.fontawesome.com/d869ac727c.js"></script>
<div class="mstoic-slider">	<div class="mstoic-slide one">	1	</div>	<div class="mstoic-slide two">	2	</div>	<div class="mstoic-slide three">	3	</div>	<div class="mstoic-slide four">	4	</div>
</div>
<p></p>
<div class="mstoic-slider">	<div class="mstoic-slide red">	1	</div>	<div class="mstoic-slide green">	2	</div>	<div class="mstoic-slide blue">	3	</div>
</div>
<!-- <div class="console">
</div> --> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Slider Images - Script Codes CSS Codes

.mstoic-slider { position: relative; overflow: hidden; width: 400px; height: 200px; margin-bottom: 10px;
}
.mstoic-slide { position: absolute; width: inherit; height: inherit; left: 100%; color: #FFF; text-align: center;
}
.mstoic-slide:nth-child(1) { left: 0px;
}
.mstoic-slide .fa-chevron-left,
.mstoic-slide .fa-chevron-right { position: absolute; top: 50%; transform: translateY(-50%); z-index: 999; cursor: pointer;
}
.mstoic-slide .fa-chevron-left { left: 5px;
}
.mstoic-slide .fa-chevron-right { right: 5px;
}
.one { background: red;
}
.two { background: green;
}
.three { background: blue;
}
.four { background: orange;
}
.slideZTMH { left: 0px !important; -webkit-animation: MinusHundred 1s forwards; animation: MinusHundred 1s forwards;
}
@-webkit-keyframes MinusHundred { 100% { left: -100%; }
}
@keyframes MinusHundred { 100% { left: -100%; }
}
.slideHTZ { left: 100% !important; -webkit-animation: zero 1s forwards; animation: zero 1s forwards;
}
.slideZTH { left: 0px !important; -webkit-animation: Hundred 1s forwards; -webkit-animation-delay: 0s; animation: Hundred 1s forwards; animation-delay: 0s;
}
@-webkit-keyframes Hundred { 100% { left: 100%; }
}
@keyframes Hundred { 100% { left: 100%; }
}
.slideMHTZ { left: -100% !important; -webkit-animation: zero 1s forwards; animation: zero 1s forwards;
}
@-webkit-keyframes zero { 100% { left: 0px; }
}
@keyframes zero { 100% { left: 0px; }
}

Simple Slider Images - Script Codes JS Codes

var slider,	slides,	slideCount,	slideLeft = 0,	temp = 0,	firstSlide,	secondSlide,	lastSlide,	seconds = 4,	msIntervals;
function moveSlideToLast(slider, firstSlide) {	firstSlide.removeClass('slideZTH slideHTZ slideMHTZ slideZTMH');	slider.append(firstSlide);	consolem();
}
function runSlider(slider) {	slides = slider.find('.mstoic-slide');	firstSlide = slides.eq(0);	secondSlide = slides.eq(1);	firstSlide.removeClass('slideZTH slideMHTZ slideHTZ').addClass('slideZTMH');	secondSlide.removeClass('slideZTH slideMHTZ slideZTMH').addClass('slideHTZ');	// Append the slide to last	setTimeout(moveSlideToLast, 1000, slider, firstSlide);
}
function moveSlideToFirst(slider, slides) {	var lastSlide = slides.last();	slider.prepend(lastSlide);	consolem();
}
function reverseSlider(slider) {	slides = slider.find('.mstoic-slide');	firstSlide = slides.eq(0);	lastSlide = slides.eq(-1);	moveSlideToFirst(slider, slides);	firstSlide.removeClass('slideHTZ slideMHTZ slideZTMH').addClass('slideZTH')	lastSlide.removeClass('slideZTH slideHTZ slideZTMH').addClass('slideMHTZ');
}
$('.mstoic-slider').each(function() {	slider = $(this);	slides = $(this).find('.mstoic-slide');	slides.each( function() {	$(this).append('<i class="fa fa-chevron-left" aria-hidden="true"></i><i class="fa fa-chevron-right" aria-hidden="true"></i>');	})	slideCount = slides.length;	var randomNumber = Math.floor(Math.random() * 999);	$(slider).data( 'intervalName', 'myVar' + randomNumber );	var temp = 'myVar' + randomNumber;	msIntervals = { temp: seconds+'000' };	window[temp] = setInterval(runSlider, seconds+'000', slider);
});
$('.mstoic-slider .fa-chevron-right').click(function() {	var slider = $(this).closest('.mstoic-slider');	//console.log(slider.data('intervalName'));
var interval = slider.data('intervalName');	console.log(interval);	clearInterval(eval(interval));	temp = 1;	runSlider(slider);	window[interval] = setInterval(runSlider, seconds+'000', slider);
});
$('.mstoic-slider .fa-chevron-left').click(function() {	var slider = $(this).closest('.mstoic-slider');	//console.log(slider.data('intervalName'));
var interval = slider.data('intervalName');	console.log(interval);	clearInterval(eval(interval));	temp = 1;	reverseSlider(slider);	window[interval] = setInterval(runSlider, seconds+'000', slider);
});
function consolem() {	$('.console').text($('.mstoic-slider').html());
}
Simple Slider Images - Script Codes
Simple Slider Images - Script Codes
Home Page Home
Developer Hemant Aggarwal
Username mstoic
Uploaded January 09, 2023
Rating 3
Size 3,348 Kb
Views 4,048
Do you need developer help for Simple Slider Images?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hemant Aggarwal (mstoic) Script Codes
Name
Theme HTML OLD
Amazing White Border Below Link
Navigation Mobile From Right Slide
3 Level Menu jQuery
Multiple jQuery Sliders
NAV WPMANAGER
Pop Up AAA
Social Share Count With JS
Amazing Hover Effect for Categories WP
DEL - SIP Calculator
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!