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 |
Counter | 3,801 Kb |
CSS3 Accordion Basic | 2,429 Kb |
Admin Template | 2,904 Kb |
Pastel Color Code | 2,156 Kb |
A Pen by panstable | 2,940 Kb |
Cool Buttons | 4,283 Kb |
Modal | 2,468 Kb |
Updated Reservation Interaction - Dribbble | 2,487 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 |
Awesome textarea | Ayoungh | 1,977 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Layout | X-gyba | 4,234 Kb |
Getting Started | Viblast | 1,500 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
P1 | Vivi_Lai | 1,533 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!