Simple Slider - Carousel
How do I make an simple slider - carousel?
Very Very very simple content slider. What is a simple slider - carousel? How do you make a simple slider - carousel? This script and codes were developed by Panstable on 11 August 2022, Thursday.
Simple Slider - Carousel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Slider - Carousel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="slideWrapper"> <ul id="latest-news-slider"> <div class="latest-news"> SON DAKİKA !</div> <li class="active"> <h4>Haber Oku</h4> <p class="monospace_hero">Cizreli 2 kadın çocuklara engel oldu<br> Taşlama devam ederken, soyadları öğrenilemeyen Vesile ve Fatma konuşarak ve elleriyle tutarak engellemeye çalıştı. </p> </li> <li> <h4>Savaş başladı</h4> <p class="monospace_hero">Full Kar Savaşı Başladı<br> Haber ver denen kar yağışı sabah saatlerinde başladı kadın, askerlere taş atan çocukları önce konuşarak ve . </p> </li> </ul> </div> <div class="slide-action"> <div class="sld-btn prev"><i class="fa fa-angle-left"></i></div> <div class="sld-btn next"><i class="fa fa-angle-right"></i></div> </div> <script src="js/index.js"></script>
</body>
</html>
Simple Slider - Carousel - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body{font-family: 'Open Sans', sans-serif !important;background:#eee !important;padding:50px;}
ul#latest-news-slider {padding-left: 0;}
ul#latest-news-slider li{display:none;}
ul#latest-news-slider li.active{display:block;}
.slide-action{ min-height: 64px; width: 200px;float: left;margin: 0 0px}
.slide-action .sld-btn{ cursor:pointer;width: 38px;height: 33px;background: #fff;padding: 0px 0 0 14px;font-size: 22px;float: left;margin-right: 5px;}
.slide-action .sld-btn:hover{transition: 0.2s;background: #ddd;}
.latest-news{color: #cc3333;font-weight: 600;font-size: 12px;width: 90px;height: 23px;border-radius: 2px;}
.slideWrapper h4 {font-weight: 700;font-size: 20px;margin:5px 0 15px 0;letter-spacing: 5px;line-height: 30px;margin-left: -1px;margin-top:4px;}
p {font-size: 14px;margin-bottom: 20px;line-height: 25px;}
Simple Slider - Carousel - Script Codes JS Codes
function slide(){ var li=$('ul#latest-news-slider li.active'); if(li.next().length>0 ) { li.removeClass('active', 3000, "easeInBack"); li.next().addClass('active', 3000, "easeInBack"); }else if(li.prev().length>0){ li.removeClass('active', 3000, "easeInBack"); $('ul#latest-news-slider li').first('li').addClass('active', 3000, "easeInBack"); }else { return; } } $('.next').click(function(){ var li=$('ul#latest-news-slider li.active'); if(li.next().length>0 ) { li.removeClass('active', 100, "easeInBack"); li.next().addClass('active', 100, "easeInBack"); }else { li.removeClass('active', 100, "easeInBack"); $('ul#latest-news-slider li').first('li').addClass('active', 100, "easeInBack"); } }); $('.prev').click(function(){ var li=$('ul#latest-news-slider li.active'); if(li.prev().length>0 && li.prev().is("li")) { li.removeClass('active', 100, "easeInBack"); li.prev().addClass('active', 100, "easeInBack"); }else { } });
Developer | Panstable |
Username | panstable |
Uploaded | August 11, 2022 |
Rating | 3.5 |
Size | 2,711 Kb |
Views | 66,792 |
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!
Name | Size |
Pastel Color Code | 2,156 Kb |
Updated Reservation Interaction - Dribbble | 2,487 Kb |
Cool Buttons | 4,283 Kb |
A Pen by panstable | 2,940 Kb |
Counter | 3,801 Kb |
Simple Slider - Carousel | 2,711 Kb |
CSS3 Accordion Basic | 2,429 Kb |
Admin Template | 2,904 Kb |
Modal | 2,468 Kb |
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!
Name | Username | Size |
Table Exercise | Fresco | 9,585 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
Snow collision | Wojtek1150 | 3,542 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
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!