Simple Slider - Carousel

Developer
Size
2,711 Kb
Views
66,792

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 Previews

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 { } });
Simple Slider - Carousel - Script Codes
Simple Slider - Carousel - Script Codes
Home Page Home
Developer Panstable
Username panstable
Uploaded August 11, 2022
Rating 3.5
Size 2,711 Kb
Views 66,792
Do you need developer help for Simple Slider - Carousel?

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!

Panstable (panstable) Script Codes
Create amazing sales emails 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!