Slider

Developer

Size

3,174 Kb

Views

40,480

Slider Previews
Slider HTML Codes
Slider CSS Codes
Slider JS Codes

How do I make an slider?

What is a slider? How do you make a slider? This script and codes were developed by Ayhan ALTINOK on 13 September 2022, Tuesday.

Slider Previews

Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>slider</title> <link rel='stylesheet prefetch' href='http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="sync1" class="owl-carousel "> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div>
</div>
<div id="sync2" class="owl-carousel"> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div> <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slider - Script Codes CSS Codes

#sync1 .item img{width:100%;margin:0;padding:0;}
#sync1 .item{ background: #0c83e7; padding: 0px 0px; margin: 5px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center;
}
#sync2 .item img{width:100%;margin:0;padding:0;}
#sync2 .item{ overflow:hidden; background: #C9C9C9; padding: 0px 0px; margin: 5px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; cursor: pointer;
}
#sync2 .item h1{ font-size: 18px;
}
#sync2 .synced .item{ background: #0c83e7;
}#bar{ width: 0%; max-width: 100%; height: 4px; background: #7fc242;
}
#progressBar{ width: 100%; ba ckground: #EDEDED;
}
.owl-buttons{background-color:#5f5e5c;width:100%;}
.owl-prev{float:left;}
.owl-prev,.owl-next{width:40%; font-family:'dl',arial;background-color:#fff;padding:10px;border:solid 1px #5f5e5c;margin:5px;}

Slider - Script Codes JS Codes

$(document).ready(function() { var time = 7; // time in seconds var sync1 = $("#sync1"); var sync2 = $("#sync2"); var $progressBar, $bar, $elem, isPause, tick, percentTime; sync1.owlCarousel({ singleItem : true, slideSpeed : 1000, navigation: false, pagination:false, afterInit : progressBar, afterMove : moved, startDragging : pauseOnDragging, autoHeight:true, afterAction : syncPosition, responsiveRefreshRate : 200, }); //Init progressBar where elem is $("#owl-demo") function progressBar(elem){ $elem = elem; //build progress bar elements buildProgressBar(); //start counting start(); } //create div#progressBar and div#bar then prepend to $("#owl-demo") function buildProgressBar(){ $progressBar = $("<div>",{ id:"progressBar" }); $bar = $("<div>",{ id:"bar" }); $progressBar.append($bar).prependTo($elem); } function start() { //reset timer percentTime = 0; isPause = false; //run interval every 0.01 second tick = setInterval(interval, 10); }; function interval() { if(isPause === false){ percentTime += 1 / time; $bar.css({ width: percentTime+"%" }); //if percentTime is equal or greater than 100 if(percentTime >= 100){ //slide to next item $elem.trigger('owl.next') } } } //pause while dragging function pauseOnDragging(){ isPause = true; } //moved callback function moved(){ //clear interval clearTimeout(tick); //start again start(); } sync2.owlCarousel({ items : 3, itemsDesktop : [1199,10], itemsDesktopSmall : [979,], itemsTablet : [768,8], itemsMobile : [479,4], pagination:true, responsiveRefreshRate : 100, afterInit : function(el){ el.find(".owl-item").eq(0).addClass("synced"); } }); function syncPosition(el){ var current = this.currentItem; $("#sync2") .find(".owl-item") .removeClass("synced") .eq(current) .addClass("synced") if($("#sync2").data("owlCarousel") !== undefined){ center(current) } } $("#sync2").on("click", ".owl-item", function(e){ e.preventDefault(); var number = $(this).data("owlItem"); sync1.trigger("owl.goTo",number); }); function center(number){ var sync2visible = sync2.data("owlCarousel").owl.visibleItems; var num = number; var found = false; for(var i in sync2visible){ if(num === sync2visible[i]){ var found = true; } } if(found===false){ if(num>sync2visible[sync2visible.length-1]){ sync2.trigger("owl.goTo", num - sync2visible.length+2) }else{ if(num - 1 === -1){ num = 0; } sync2.trigger("owl.goTo", num); } } else if(num === sync2visible[sync2visible.length-1]){ sync2.trigger("owl.goTo", sync2visible[1]) } else if(num === sync2visible[0]){ sync2.trigger("owl.goTo", num-1) } }
});

Home Page	Home
Developer	Ayhan ALTINOK
Username	AyhanALTINOK
Uploaded	September 13, 2022
Rating	3
Size	3,174 Kb
Views	40,480

Do you need developer help for Slider?

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!

Ayhan ALTINOK (AyhanALTINOK) Script Codes

Name	Size
Css galeri	2,640 Kb
Akordion slayt -acordion slide	3,256 Kb
Jquery Fare Animasyonu - Jquery Mouse Animation	2,600 Kb
Facebook Responsive Lightbox	4,661 Kb
Menu	2,158 Kb
Css3 animasyon	3,191 Kb
Galeri efekti	2,054 Kb
A Pen by Ayhan ALTINOK	49,465 Kb
Filtre ile Arama Kutusu - Search Box with Filter	3,448 Kb
Css sallanan resim efekti	2,476 Kb

Create amazing Facebook ads 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!

Similar Scripts & Codes

Name	Username	Size
Working around OS X Dynamic Scrollbars	Jrjenk	2,279 Kb
Responsive Minimal Blog Layout	Hackthevoid	5,261 Kb
E-mail Template	SoloMDFK	4,871 Kb
IbrahimJabbari-Effect14	Ibrahimjabbari	1,919 Kb
Calculator	Rzencoder	4,572 Kb
CSS Chat Bubbles	Boylett	2,094 Kb
Horizontal Navigation with Floats	Gymratpacks	5,403 Kb
JS Countdown Timer	Ayoungh	2,435 Kb
Funny menu	AxeLVaisper	4,671 Kb
A Pen by Jess	Jessamyne	5,100 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!