Slider
How do I make an slider?
What is a slider? How do you make a slider? This script and codes were developed by Mohammed Fawzy on 26 January 2023, Thursday.
Slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>slider</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="testim text-center"> <div class="overlay"> <div class="container"> <div class="client active"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0hw1PxT2sLQ7fwDm-WBh3DTfPbYh3kTi0BJh4rlrFpmkiIH4D" alt="" /> <p>These guys are incredible! I get my project in 10 days and it was awesome! <br> Very good service! Highly recommended!</p> <span>John Smith</span> </div> <div class="client hidden"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0hw1PxT2sLQ7fwDm-WBh3DTfPbYh3kTi0BJh4rlrFpmkiIH4D" alt="" /> <p>These guys are incredible! I get my project in 10 days and it was awesome! <br> Very good service! Highly recommended!</p> <span>Osama Mohamed</span> </div> <div class="client hidden"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0hw1PxT2sLQ7fwDm-WBh3DTfPbYh3kTi0BJh4rlrFpmkiIH4D" alt="" /> <p>These guys are incredible! I get my project in 10 days and it was awesome! <br> Very good service! Highly recommended!</p> <span>Hassan Zohdi</span> </div> <div class="client hidden"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0hw1PxT2sLQ7fwDm-WBh3DTfPbYh3kTi0BJh4rlrFpmkiIH4D" alt="" /> <p>These guys are incredible! I get my project in 10 days and it was awesome! <br> Very good service! Highly recommended!</p> <span>Ali Hamdy</span> </div> <i class="fa fa-chevron-right fa-2x"></i> <i class="fa fa-chevron-left fa-2x"></i> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Slider - Script Codes CSS Codes
/* Start Our Framework */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif
}
.container { width: 1200px; margin: auto; position: relative
}
.text-center { text-align: center
}
.upper { text-transform: uppercase
}
.main-color { color: #f7600e
}
.main-background { background-color: #f7600e
}
.overlay { background: rgba(49, 55, 61, .9); width: 100%; height: 100%
}
.hidden { display: none
}
.testim { background: url('../images/testimonials.png'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover
}
.testim .container { min-height: 392px
}
.testim .client { padding: 50px 0; color: #FFF; font-size: 20px
}
.testim .client img { border-radius: 50%
}
.testim .client p { line-height: 2; font-style: italic
}
.testim .fa-chevron-right,
.testim .fa-chevron-left { position: absolute; top: 50%; color: #999; cursor: pointer
}
.testim .fa-chevron-right:hover,
.testim .fa-chevron-left:hover { color: #f7600e
}
.testim .fa-chevron-right { right: 0
}
.testim .fa-chevron-left { left: 0
}
Slider - Script Codes JS Codes
var leftArrow = $('.testim .fa-chevron-left'), rightArrow = $('.testim .fa-chevron-right'); function checkClients() { if ($('.client:first').hasClass('active')) { leftArrow.fadeOut(); } else { leftArrow.fadeIn(); } if ($('.client:last').hasClass('active')) { rightArrow.fadeOut(); } else { rightArrow.fadeIn(); } } checkClients(); $('.testim i').click(function () { if ($(this).hasClass('fa-chevron-right')) { $('.testim .active').fadeOut(100, function () { $(this).removeClass('active').next('.client').addClass('active').fadeIn(); checkClients(); }); } else { $('.testim .active').fadeOut(100, function () { $(this).removeClass('active').prev('.client').addClass('active').fadeIn(); checkClients(); }); } });
Developer | Mohammed Fawzy |
Username | mohammed-fawzy |
Uploaded | January 26, 2023 |
Rating | 3 |
Size | 2,634 Kb |
Views | 8,096 |
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 |
Update text with react | 2,858 Kb |
JQuery Collapse | 4,096 Kb |
Search lable in search input | 1,512 Kb |
Scroll to Top | 6,082 Kb |
Todo List with react | 3,687 Kb |
A Pen by mohammed fawzy | 3,934 Kb |
Tool Box | 3,036 Kb |
Tab | 2,563 Kb |
Full width to the odds div | 2,571 Kb |
Like button with react | 4,397 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 |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
Sass Radar | Jlong | 6,887 Kb |
Playing with transition timing | Mattgrosswork | 1,993 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!