I am using this JS code I found to make a slideshow work:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("hp-slides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
.slides-container {
display: block;
position: relative;
width: 100%;
}
.slides-container img {
width: 100%;
height: auto;
display: block;
}
.button {
position: absolute;
top: 50%;
transform: translate(0%,-50%);
user-select: none;
border: none;
background-color: rgb(0,0,0,0);
cursor: pointer;
border: none;
}
.buttonL {
left: 0;
height: 100%;
padding: 0 10% 10px 2.8%;
}
.buttonR {
right: 0;
height: 100%;
padding: 0 2.8% 10px 10%;
}
.arrowL,
.arrowR {
width: 25px;
height: 25px;
color: #fff;
border-bottom: 6px solid;
border-left: 6px solid;
margin-bottom: 20px;
}
.arrowL {transform: rotate(45deg);margin-left: 5px;}
.arrowR {transform: rotate(-135deg); margin-right: 5px;}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="slides-container">
<img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/ThreeTimeAKCGoldWinnerPembrookeWelshCorgi.jpg/1200px-ThreeTimeAKCGoldWinnerPembrookeWelshCorgi.jpg" alt="">
<img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Akita_Inu_dog.jpg/1200px-Akita_Inu_dog.jpg" alt="">
<img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg" alt="">
<button class="button buttonL" onclick="plusDivs(-1)"><div class="arrowL"></div></button>
<button class="button buttonR" onclick="plusDivs(1)"><div class="arrowR"></div></button>
</div>
</body>
But the images move right as I click = too fast/ not elegant.
I saw this other code in other JS slider examples, which made the slides move slower (Those other codes didn't work for me for other reasons (couldn't be resized, needed complicated/hidden jQuery, etc.))
setInterval(function() {
showDivs()
}, 5000);
But I don't know where to place it. I changed the name to be one of the function names (showDivs) and tried sticking it in between functions, but it didn't work.
I'm already on 3-4 days looking for a simple slider with arrows that will scale with the page and losing my mind.
Thank you!
Check out this codepen
in js:
// automatic slider
var autoSlider = setInterval(slideRight, 3000);
// change that line (34) to control the time each slide is shown.
in css:
transition: all 3s cubic-bezier(1,.01,.32,1);
/* change that line (162) to control the transition length. */
in html:
replace the divs inside the li elements with your img tags.
(lines 14->17, 22->25, etc...)
Related
Basically, I coded this player for my personal video hosting site (some elements censored in this example) but when I embed a video, it aligns to the left side and gets cut off at the right side or has a black bar there if the ratio is off.
(I embedded a video from Archive.org for this example, it is by no means my own. It appears to belong to Scott Draves.)
function vidplay() {
var video = document.getElementById("SubjectVideo");
var button = document.getElementById("play");
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function restart() {
var video = document.getElementById("SubjectVideo");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("SubjectVideo");
video.currentTime += value;
}
function hideControls() {
var x = document.getElementById("controls");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
background-color: black;
}
#SubjectVideo {
position: fixed;
height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
#Data {
display: flex;
flex-wrap: wrap;
}
.EpisodeData {
text-align: right;
flex: 50%;
}
#hideButtons {
text-align: left;
flex: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>[Video title]</title>
<link rel="icon" href="../../../../favicon.ico" type="image/png" sizes="16x16">
<link rel="stylesheet" href="../../../player.css">
<script src="../../../RedirectScripts/redirect.js"></script>
<script src="../../../player.js"></script>
</head>
<body id="main" onLoad="hideControls()">
<video autoplay id="SubjectVideo" onended="NextVideo()">
<source src="https://ia801507.us.archive.org/35/items/electricsheep-flock-247-52500-0/00247%3D52640%3D52374%3D52639.mp4" type="video/mp4">
Your browser doesn't support < video >..
</video>
<div class="content">
<div id="controls">
<div id="buttonbar">
<p><center><img src="../../logo.png" width="20%"></p>
<button id="restart" onclick="restart();"><img src="../../../restart.png" alt="restart"></button>
<button id="rew" onclick="skip(-30)"><img src="../../../rewind.png" alt="rewind 30s"></button>
<button id="play" onclick="vidplay()"><img src="../../../play.png" alt="play/pause"></button>
<button id="fastFwd" onclick="skip(30)"><img src="../../../fastforward.png" alt="fast-forward 30s"></button>
</div>
</div>
<div id="Data">
<div class="hideButtons">
<button id="hide" onclick="hideControls()">Show/Hide Controls</button>
</div>
<div class="EpisodeData">
Video Title
</div>
</div>
</div>
</body>
</html>
When I insert a tag around the video, it puts the left edge of the video on the edge instead of properly centering it.
does anyone know how I could effectively center it, and put borders on the bottom and top instead of having a cutoff on the sides?
The error at the end is for an autoplay script that isn't linked here, it can be disregarded.
Add the next styles to the video tag
left: 0;
right: 0;
margin: auto;
Add this #SubjectVideo ruleset to center your <video> tag:
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
It should look like this:
#SubjectVideo {
position: fixed;
height: 100%;
margin-right: auto;
margin-left: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
So for my website I'm trying to implement a Carousel but the pictures are not being resized and the next and prev functions aren't working. Any suggestions?
I tried including the script at the bottom of the html function and making sure the functions were all defined. What I'm trying to do is have the pictures be smaller on the html page and have the prev and next functions underneath the pictures and make sure that the carousel is working
HTML
<h1 class="header"> Projects </h1>
<div id="container">
<div class = "carousel-item fade" style="width: 50%">
<img src = "hackBU.png">
<div class = "carousel-text"> Text </div>
</div>
<div class = "carousel-item fade">
<img src = "pigGame.png">
<div class = "carousel-text"> Text </div>
</div>
<div class = "carousel-item fade">
<img src = "connect4.png">
<div class = "carousel-text"> Text </div>
</div>
<div class = "carousel-item fade">
<img src = "ese123clock.png">
<div class = "carousel-text"> Text </div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusItem(-1)">❮</a>
<a class="next" onclick="plusItem(1)">❯</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
CSS
#projects{
width: auto;
height: 40rem;
margin: 4rem;
text-align: center;
}
.header{
color: white;
text-align: center;
font-family: Helvetica Neue',Helvetica,Arial,sans-serif;
}
.container{
width: 40rem;
position: relative;
margin: auto;
}
.carousel-item{
display: none;
width: 10%;
}
.prev,.next{
cursor: pointer;
position: inherit;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: blue;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
JS
document.addEventListener("DOMContentLoaded", function(event) {
var itemIndex = 1;
showItem(itemIndex);
// Next/previous controls
function plusItem(n) {
showItem(itemIndex += n);
}
// Thumbnail image controls
function currentItem(n) {
showItem(itemIndex = n);
}
function showItem(n) {
var item = document.getElementsByClassName("carousel-item");
if (n > item.length) {itemIndex = 1}
if (n < 1) {itemIndex = item.length}
for (var i = 0; i < item.length; i++) {
item[i].style.display = "none";
}
item[itemIndex-1].style.display = "block";
}
},false);
I'm assuming you just need someone to tell you why your events aren't firing on click; If you need more help than this, please let me know.
The functions you're calling (plusItem) aren't defined when you click the arrow because you're defining them in the "DOMContentLoaded" handler which is not firing.
I would move the function declarations outside the "DOMContentLoaded" handler. See the snippet below;
var itemIndex = 1;
document.addEventListener("DOMContentLoaded", function(event) {
showItem(itemIndex);
},false);
// Next/previous controls
function plusItem(n) {
console.log('plusitem')
showItem(itemIndex += n);
}
// Thumbnail image controls
function currentItem(n) {
showItem(itemIndex = n);
}
function showItem(n) {
var item = document.getElementsByClassName("carousel-item");
if (n > item.length) {itemIndex = 1}
if (n < 1) {itemIndex = item.length}
for (var i = 0; i < item.length; i++) {
item[i].style.display = "none";
}
item[itemIndex-1].style.display = "block";
}
As to why your "DOMContentLoaded" handler isn't firing, I believe this executes too early for a footer script to detect page load. If your script is in the footer ,you shouldn't need to detect page load for this. Alternatively, look at window load: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
For future reference, it's a great idea to see what feedback the console gives you when developing javascript, as in this case you would see "plusItem is not defined" which would give you a clue. Using console logging (console.log("abc")) is also very useful to see which parts of your script are being executed.
I'm a beginner to create a website.
I need help for my slides created on a website. I copied and pasted the code on my website but my slides are displayed differently (displayed like column )
Moreover, I'd like to disable the prev arrow on the first slide and the next arrow on the last slide.
https://www.w3schools.com/code/tryit.asp?filename=FZUU76085WOH
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
.mySlides {
display: none;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
Tanks for your help
You need to check if the slideIndex += n value (from clicking the arrow buttons) is the same as the amount of slides you have, if so then disable the next button because there are no more slides.
Also the same logic for the previous slide. If the index is where you started, then disable the previous button.
Here's an example:
var slides = document.getElementsByClassName("mySlides");
var nextBtn = document.getElementById("nextBtn");
var prevBtn = document.getElementById("prevBtn");
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
var newIndex = slideIndex += n;
handleDisabled(newIndex);
showDivs(newIndex);
}
function showDivs(n) {
var i;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
function handleDisabled(newIndex) {
prevBtn.disabled = false;
nextBtn.disabled = false;
if (newIndex === slides.length) {
nextBtn.disabled = true;
} else if (newIndex === 1) {
prevBtn.disabled = true;
}
}
.mySlides {
display: none;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%">
<button id="prevBtn" disabled class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button id="nextBtn" class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
Just make it so if n > x.length or n < x.length the display property of the button be set to "none".
I have created another slider based on an example on a website:
enter link description here
I would like to get exactly the same slider on my wordpress, buy when I past the code on my website I have the result of code snippet :(
May you please take a look at this (if possible try it to check it). I tried for several days without success
Thanks
$switch-speed: 1s;
$slider-number: 5;
$slider-width: 100% / $slider-number;
$image1: 'https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg';
$image2: 'https://meshrepsy.fr/wp-content/uploads/Entrée.jpg';
$image3: 'https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg';
$image4: 'https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg';
$image5: 'https://meshrepsy.fr/wp-content/uploads/Cure-type.jpg';
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #1C2325;
color: #eee;
}
.outer-wrapper {
width: 80%;
margin: 50px auto;
}
// basic styles
.s-wrap {
width: 100%;
margin-bottom: 50px;
padding-bottom: 55%;
position: relative;
border: 2px solid #fff;
background-color: #efefe8;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
> input {
display: none;
}
.s-content {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100% * $slider-number;
height: 100%;
font-size: 0;
list-style: none;
transition: transform $switch-speed;
}
.s-item {
display: inline-block;
width: $slider-width;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.s-item-1 {background-image: url($image1);}
.s-item-2 {background-image: url($image2);}
.s-item-3 {background-image: url($image3);}
.s-item-4 {background-image: url($image4);}
.s-item-5 {background-image: url($image5);}
}
.s-type-1 {
.s-control {
position: absolute;
bottom: 18px;
left: 50%;
text-align: center;
transform: translateX(-50%);
transition-timing-function: ease-out;
> label[class^="s-c-"] {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
border-radius: 50%;
border: 1px solid #999;
background-color: #efefe8;
cursor: pointer;
}
}
.s-nav label {
display: none;
position: absolute;
top: 50%;
padding: 5px 10px;
transform: translateY(-50%);
cursor: pointer;
&::before,
&::after {
content: "";
display: block;
width: 8px;
height: 24px;
background-color: #fff;
}
&::before {margin-bottom: -12px;}
&.left {
left: 20px;
&::before {transform: rotate(45deg);}
&::after {transform: rotate(-45deg);}
}
&.right {
right: 20px;
&::before {transform: rotate(-45deg);}
&::after {transform: rotate(45deg);}
}
}
#for $i from 1 through $slider-number {
#s-#{$i}:checked {
& ~ .s-content {transform: translateX(-$slider-width * ($i - 1));}
& ~ .s-control .s-c-#{$i} {background-color: #333;}
& ~ .s-nav .s-nav-#{$i} {display: block;}
}
}
}
.s-type-2 {
.s-content {
animation: slider-animation 50s ease-in-out infinite;
&:hover {animation-play-state: paused;}
}
}
#keyframes slider-animation {
$i: 0;
$j: 0;
$times: ($slider-number - 1) * 2;
#while $i < 100 {
#{$i}%,
#{$i + 7}% {
#if $i < 50 {
transform: translateX(-$slider-width * $j);
} #else {
transform: translateX(-$slider-width * ($times - $j));
}
}
$i: $i + 100 / $times;
$j: $j + 1;
}
}
<div class="outer-wrapper">
<div class="s-wrap s-type-1" role="slider">
<input type="radio" id="s-1" name="slider-control" checked="checked">
<input type="radio" id="s-2" name="slider-control">
<input type="radio" id="s-3" name="slider-control">
<input type="radio" id="s-4" name="slider-control">
<input type="radio" id="s-5" name="slider-control">
<ul class="s-content">
<li class="s-item s-item-1"></li>
<li class="s-item s-item-2"></li>
<li class="s-item s-item-3"></li>
<li class="s-item s-item-4"></li>
<li class="s-item s-item-5"></li>
</ul>
<div class="s-nav">
<label class="s-nav-1 right" for="s-2"></label>
<label class="s-nav-2 left" for="s-1"></label>
<label class="s-nav-2 right" for="s-3"></label>
<label class="s-nav-3 left" for="s-2"></label>
<label class="s-nav-3 right" for="s-4"></label>
<label class="s-nav-4 left" for="s-3"></label>
<label class="s-nav-4 right" for="s-5"></label>
<label class="s-nav-5 left" for="s-4"></label>
</div>
</div>
I have a script in jsfiddle that works: https://jsfiddle.net/oxw4e5yh/
However in HTML doc it is not working:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);
</script>
<style>
/* Make it a marquee */
.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}
</style>
</head>
<body>
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>
</body>
</html>
The script is a css and javascript marquee to control a steady speed for the scrolling text.
Any idea what I am missing?
Also, as you can see on the fiddle, it takes a while for the text to start scrolling. Can I reduce the delay?
Call your JS function once all the DOM is ready, usually this is being done by using window.onload as follows:
window.onload = function() {
calcSpeed(75);
}
You are trying to select an element that has not been created yet.
Move your script to below the marquee
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<script type="text/javascript">
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);
</script>
put your script and style codes before the closing of body.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<script>
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);
</script>
<style>
/* Make it a marquee */
.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}</style>
</body>
</html>
this works on me
You should write all script in last of page because script will trying to find tag id's and DOM is not ready that time than give error.
Sample
<html>
<head>
<style>
/* your style here */
</style>
</head>
<body>
<!-- your html here -->
<script>
// your script here
</script>
</body>
</html>
Please read
JavaScript and CSS order
See this
function calcSpeed() {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / 1000;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
//calcSpeed(10);
}
</script>
<body onload="calcSpeed()">
I tested it on Chrome and Firefox...works perfectly. So, I presume it should work for you too.
I've been messing around with my slider and I got it to slide by itself. The problem is, there is no way you can manually view the slides. I would like to add navigation dots on the bottom so you can skim through the slides without having to view them as the slider goes along. If you could help me with this it would be greatly appreciated.
My slider html:
<div id="slider-container">
<div style="position: relative">
<div class="slide"><img id="slide_1" src="images/slide_1.jpg"/></div>
<div class="slide"><img id="slide_2" src="images/slide_2.jpg"/></div>
<div class="slide"><img id="slide_3" src="images/slide_3.jpg"/></div>
<div class="slide"><img id="slide_4" src="images/slide_4.jpg"/></div>
<div class="slide"><img id="slide_5" src="images/slide_5.jpg"/></div>
<div class="slide"><img id="slide_6" src="images/slide_6.jpg"/></div>
</div>
</div>
My slider css:
.slide-container {
display:block;
}
.slide {
top:0;
width:760px;
height:420px;
display:block;
position:absolute;
transform:scale(0);
transition:all .7s;
}
.slide img {
width:100%;
height:100%;
border-radius:6px;
border:1px solid #95ca1a;
}
My slider javascript:
$(document).ready(function() {
(function (){
var count = $(".slide > img").length;
var current = 1;
var sliderNext = 2;
$("img[id^='slide_']").fadeOut(0);
$("#slide_" + current).fadeIn(300);
var loop = setInterval(function() {
$("#slide_" + current).fadeOut(300);
$("#slide_" + sliderNext).fadeIn(300);
(sliderNext >= count) ? sliderNext = 1 : sliderNext++;
(current >= count) ? current = 1 : current++;
}, 3000)
})()
});
Here's an example of what I mean by nav dots:
CSS Slider - Codepen
First create list of dots, you can do it manually by creating list of "li" tags or can create it via jQuery.
here is code
<ol>
<li></li>
<li></li>
<li></li>
</ol>
number of "li" element should match with number of images
then have following css
#slider-container {
position:relative;
overflow:hidden;
width:100%;
height:380px;
display:inline-block;
}
.slide {
top:0;
width:100%;
display:inline-block;
}
.slide img {
width:100%;
height:100%;
border-radius:6px;
border:1px solid #95ca1a;
}
/******* css of dots ****/
ol{
list-style= none;
width:100%;
}
ol li{
background: #888;
border-radius: 50%;
display: inline-block;
width:20px;
height:20px;
cursor: pointer;
}
then add following jQuery stuff
$('ol li').bind('click', function(){
var index = $(this).index() + 1;
$(".active").fadeOut(300);
$("#slide_" + index).fadeIn(300);
$(".slide").removeClass("active");
$("#slide_" + index).addClass("active");
});
this code will hide active image and shows selected image
here is Fiddle example
hope it will help you
Here is a carousel script I wrote for a project. This allows you to click forward and backward and also on the dots. It's also dynamic so if you have 1 image, there are no dots or scroll bars, if you have 2 images there are the bars to go right and left but no dots, once you have three or more images the dots will be applied.
JsFiddle
HTML
<div class="carousel-container">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="carousel-image-holder">
<img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg" />
<img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg" />
<img src="http://blog.metrotrends.org/wp-content/uploads/2013/09/childPoverty.jpg" />
<img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg" />
</div>
</div>
<div class="clear"></div>
<div class="carousel-buttons-container">
<ul></ul>
</div>
CSS
.clear{clear:both;}
.carousel-container{
width: 600px;
height: 360px;
float: left;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.right-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
right: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.left-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
left: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.carousel-image-holder{
height:360px;
width: 2400px;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
}
.carousel-image-holder img{
width: 600px;
float: left;
margin: 0;
padding: 0;
display: inline-block;
}
.carousel-buttons-container{
width: 600px;
text-align: center;
margin: 15px 0 0 0;
padding: 0;
}
.carousel-buttons-container ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.carousel-buttons{
background-color: #dddddd;
height: 18px;
width: 18px;
border-radius: 50%;
display: inline-block;
margin: 0 10px 0 0;
padding: 0;
cursor: pointer;
}
.carousel-buttons:last-of-type{
margin: 0;
}
.active{
background-color: #e67e22;
}
JQUERY
$(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;
var addId = numImgs;
if(numImgs == 2){
var clicked = 0;
imgCount = numImgs-2;
}else if(numImgs <= 1){
$(".right-arrow").hide();
}else{
var clicked = 1;
imgCount = numImgs-1;
}
if(numImgs > 2){
for (var i=0; i<numImgs; i++){
$("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>');
var addId = addId - 1;
}
}else{
}
$(".carousel-buttons").click(function(){
var findIdClicked = $(this).attr("id");
var splitString = findIdClicked.split("carousel")
var findTheNumb = splitString[1];
$(".carousel-buttons").removeClass("active");
$(this).addClass("active");
clicked = parseInt(findTheNumb);
var adjustNumberforSlide = findTheNumb-1;
$(".carousel-image-holder").animate({"left": -(600*adjustNumberforSlide)+"px"});
console.log(clicked);
if(findTheNumb == 1){
$(".left-arrow").hide();
$(".right-arrow").show();
}else if (findTheNumb == numImgs){
$(".right-arrow").hide();
$(".left-arrow").show();
}else{
$(".right-arrow").show();
$(".left-arrow").show();
}
});
$(".carousel-buttons-container").find("li").first().addClass("active");
$(".right-arrow").click(function(){
if (clicked < imgCount){
$(".carousel-image-holder").animate({"left": "-=600px"});
console.log(clicked);
}else{
$(".carousel-image-holder").animate({"left": "-=600px"});
$(".right-arrow").hide();
console.log(clicked);
}
clicked = clicked+1;
$(".left-arrow").show();
$(".carousel-buttons").removeClass("active");
$("#carousel"+clicked).addClass("active");
});
$(".left-arrow").click(function(){
if (clicked > 2){
$(".carousel-image-holder").animate({"left": "+=600px"});
console.log(clicked);
}else{
$(".carousel-image-holder").animate({"left": "+=600px"});
$(".left-arrow").hide();
console.log(clicked);
}
$(".right-arrow").show();
clicked = clicked-1;
$(".carousel-buttons").removeClass("active");
$("#carousel"+clicked).addClass("active");
});
I'll clean up the spacing, just wanted to get this posted