I created a fade slider with images, text and links. I'd like to add some navigation bullets below it to control the images.
like this :
http://www.parallaxslider.com/preview_images/skins/bullets_skin.jpg
Here is the slider code:
html
<div class="slides">
<div class="slidiv">
<a href="..." ><img src="..." >
<span> text1 </span></a>
</div>
<div class="slidiv">
<a href="..." ><img src="..." >
<span> text2 </span></a>
</div>
<div class="slidiv">
<a href="..." ><img src="..." >
<span> text3 </span></a>
</div>
<div class="slidiv">
<a href="..." ><img src="...">
<span> text4 </span></a>
</div>
</div>
CSS
.slides {
overflow:hidden;
top:0;
position:relative;
width:100%;
height:206px;
z-index:920;
border-bottom:white 6px solid;
}
.slides img {
position:absolute;
left:0;
top:0;
}
.slides span {
position: absolute;
right: 100px;
top: 160px;
color:white !important;
font-size:20px;
}
Javascript
<script type="text/javascript">
$(function() {
$('.slides .slidiv:gt(0)').hide();
setInterval(function () {
$('.slides').children().eq(0).fadeOut(2000)
.next('.slidiv')
.fadeIn(2000)
.end()
.appendTo('.slides');
}, 6000); // 6 seconds
});
</script>
You have to define a unique id for each slide, then build html for circles (make sure you have a way of referencing which circle matches up to which slide). Then you capture the on click event, clear the interval, cycle forward until the slide in the "current" position matches the circle, then create the interval again. And of course every time it cycles forward you need to set a visual cue for the circle associated with the active slide.
(Demo)
HTML
<div class="slider">
<div class="slides">
<div class="slidiv" id="1">
<a href="...">
<img src="http://placehold.it/350x150/3296fa/ffffff">
<span>text1</span>
</a>
</div>
<div class="slidiv" id="2">
<a href="...">
<img src="http://placehold.it/350x150/fa9632/ffffff">
<span>text2</span>
</a>
</div>
<div class="slidiv" id="3">
<a href="...">
<img src="http://placehold.it/350x150/ff3399/ffffff">
<span>text3</span>
</a>
</div>
<div class="slidiv" id="4">
<a href="...">
<img src="http://placehold.it/350x150/33ff99/ffffff">
<span>text4</span>
</a>
</div>
</div>
<div class="circles">
</div>
</div>
CSS
.circles, .circle {
display: inline-block;
}
.circles {
position: relative;
left: 50%;
transform: translateX(-50%);
}
.circle {
padding: 5px;
border-radius: 100%;
border: 1px solid #444;
}
.active {
background: rgb(50, 150, 250);
}
JAVASCRIPT
$(function () {
$('.slides .slidiv:gt(0)').hide();
$.fn.setActive = function () {
if ($(this).hasClass("slider")) {
$(".active", $(this)).removeClass("active");
$("#circle-" + $(".slidiv:first-child", $(this),$(this)).attr("id"),$(this)).addClass("active");
return this;
}
return false;
}
$.fn.cycleFwd = function(rateStart,rateEnd) {
if ($(this).hasClass("slider")) {
$('.slides', $(this)).children()
.eq(0)
.fadeOut(rateStart)
.next('.slidiv')
.fadeIn(rateEnd)
.end()
.appendTo($('.slides', $(this)));
$(this).setActive($('.slidiv:first-child',$(this)).attr("id"));
return this;
}
return false;
}
$.fn.cycleFwdTo = function (id,rate) {
if($(this).hasClass("slider")) {
var current = $(".slidiv:first-child", $(this));
if(current.attr("id") === id) return true;
var count = id;
if(current.attr("id") > id) {
count = Number(current.nextAll().length) + Number(id) + 1;
}
if(count - current.attr("id") === 1) {
$(this).cycleFwd(rate,2000);
} else {
$(this).cycleFwd(rate,0);
$(this).cycleFwdTo(id,0);
}
return this;
}
return false;
}
$(".circle").on("click", function () {
clearInterval(window.interval);
var newFirst = $(this).attr("data-moveto");
$(this).parent().parent().cycleFwdTo(newFirst,2000);
var self = this;
window.interval = setInterval(function () {
$(self).parent().parent().cycleFwd(2000,2000);
}, 6000); // 6 seconds
});
$('.slider').each(function(){
var self = this;
window.interval = setInterval(function () {
$(self).cycleFwd(2000,2000);
}, 6000); // 6 seconds
});
});
EDIT:
This answer is not very good because it does not very well explain how it works, but this falls into "I could write a novel" explaining all of the different methods of doing what the OP has asked and how each method works. If someone else wanted to come along and offer better explanations of how this code works, I would approve.
Related
I'm having a two issues/problems with the following slide.
It is a "double slider", so, two simultaneous slider in body section.
First is that when i reach the last image (9-nth, cos that much both sliders contain), the second slider continues to work properly (sliding images infinitely) but the first one just get blank.
Or if i click on previous button on begining then second doesn't work and images disapear, while the first one work nicely. Can't figure it out why. I've tried changing the "id" in the HTML and styling it but nothing change.
Second is, that i finally need to make it more dynamic, so, to avoid hardcoding images in the HTML and to putt them in JS and somehow append them in the DOM, but don't know what exactlly to do; creating an array, or using the "createElement"?
And which logic could be usable to actually include them in the DOM and have the following slider(s), considering the provided code?
Since it's my just second slider which i'm making, i found it pretty much hard, so any help/hint/advice is welcomed.
P.S Must be in jQuery and plugins excluded, so please don't provide any plugins links.
Thank you in advance.
var slides = $('.slide');
slides.first().before(slides.last());
$('button').on('click', function() {
// Selecting the slides
slides = $('.slide');
// Selecting button
var button = $(this);
// Register active slide
var activeSlide = $('.active');
// Next function
if (button.attr('id') == 'next') {
slides.last().after(slides.first());
activeSlide.removeClass('active').next('.slide').addClass('active');
}
// Previous function
if (button.attr('id') == 'previous') {
slides.first().before(slides.last());
activeSlide.removeClass('active').prev('.slide').addClass('active');
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
transition: 0.6s ease;
transform: translate(-100%, 0);
}
.slide img {
width: 100%;
height: 300px;
}
.slide.active {
transform: translate(0, 0);
}
.slide.active~.slide {
transform: translate(100%, 0);
}
body {
text-align: center;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aqua;
color: #333;
padding: 10px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slide active">
<img src="Assets/slider-image-1.jpg" alt="">
</div>
<div class="slide">
<img src="Assets/slider-image-2.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-3.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-4.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-5.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-6.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-7.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-8.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-9.jpg">
</div>
</div>
<div class="slider">
<div class="slide active">
<img src="Assets/slider-image-1.jpg" alt="">
</div>
<div class="slide">
<img src="Assets/slider-image-2.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-3.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-4.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-5.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-6.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-7.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-8.jpg">
</div>
<div class="slide">
<img src="Assets/slider-image-9.jpg">
</div>
</div>
<button id="previous"><img src="Assets/arrow-blue-left.png" alt=""></button>
<button id="next"><img src="Assets/arrow-blue-right.png" alt=""></button>
Your code doesn't work properly because the slides = $('.slide') variable contains all slides from both sliders. You have to manipulate the slides in the to sliders independently. The second failure is that in your example the first slide is the initial active slide. Only slides in range second -> penultimate are allowed. Working example here
function handleSlide(slider, direction) {
var slides = $(slider).find('.slide');
if(slides.length < 1) return;
// Register active slide
var activeSlide = $(slider).find('.active');
// Next function
if (direction == 'next') {
slides.last().after(slides.first());
activeSlide.removeClass('active').next('.slide').addClass('active');
}
// Previous function
if (direction == 'previous') {
slides.first().before(slides.last());
activeSlide.removeClass('active').prev('.slide').addClass('active');
}
}
$('button').on('click', function() {
var button = $(this);
handleSlide($("#slider1"), $(button).attr('id'));
handleSlide($("#slider2"), $(button).attr('id'));
});
Loading images dinamically: You can do that by defining an array which contains the images and you can append the images into the slider using the jQuery 'append' method. Working example on jsFiddle.
function fillSliders(slider, images) {
$(slider).empty();
for(var i = 0; i < images.length; i++) {
if(typeof images[i] == "string" && images[i] !== "") {
var active = (i == 1) ? " active" : "";
$(slider).append('<div class="slide'+active+'"><img src="'+images[i]+'"
alt="image-'+i+'" /></div>');
}
}
}
var images = ["image1.jpg", "image2.jpg","image3.jpg","image4.jpg"];
fillSliders($("#slider"), images);
I'm trying to make a basic image gallery with simple html, css and js
This is the code so far.
$('.navigation-1').click(function() {
$('.cat-1').css("opacity", "1");
$('.cat-2').css("opacity", "0");
$('.cat-3').css("opacity", "0");
$('.cat-4').css("opacity", "0");
});
$('.navigation-2').click(function() {
$('.cat-1').css("opacity", "0");
$('.cat-2').css("opacity", "1");
$('.cat-3').css("opacity", "0");
$('.cat-4').css("opacity", "0");
});
$('.navigation-3').click(function() {
$('.cat-3').css("opacity", "1");
$('.cat-1').css("opacity", "0");
$('.cat-2').css("opacity", "0");
$('.cat-4').css("opacity", "0");
});
$('.navigation-4').click(function() {
$('.cat-4').css("opacity", "1");
$('.cat-1').css("opacity", "0");
$('.cat-2').css("opacity", "0");
$('.cat-3').css("opacity", "0");
});
.navigation {
margin-bottom: 15px;
}
.cat {
opacity: 0;
position: absolute;
transition: opacity 0.5s ease-in-out;
}
/* Show a picture at load */
.cat-1 {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="navigation">
<button class="nav navigation-1">Cat 1</button>
<button class="nav navigation-2">Cat 2</button>
<button class="nav navigation-3">Cat 3</button>
<button class="nav navigation-4">Cat 4</button>
</div>
<img class="cat cat-1" src="http://placekitten.com/300/200" alt="">
<img class="cat cat-2" src="http://placekitten.com/300/201" alt="">
<img class="cat cat-3" src="http://placekitten.com/301/200" alt="">
<img class="cat cat-4" src="http://placekitten.com/301/201" alt="">
How do I dynamically generate the buttons and hide the other images, when one image is shown.
I used opacity to show and hide images, but feel free to use whatever suits you best.
I'm sure the this keyword is useful here, but how?
How about the following... where I've added a "data-index" attribute to the "navigation" buttons.
The on button click you hide all "cat" items, and then show the required one by targeting it using the "data-index" attribute.
$('.nav').click(function() {
$('.cat').css("opacity", "0");
var id = $(this).data("index");
$('.cat-' + id).css("opacity", "1");
});
.navigation {
margin-bottom: 15px;
}
.cat {
opacity: 0;
position: absolute;
transition: opacity 0.5s ease-in-out;
}
/* Show a picture at load */
.cat-1 {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="navigation">
<button class="nav" data-index="1">Cat 1</button>
<button class="nav" data-index="2">Cat 2</button>
<button class="nav" data-index="3">Cat 3</button>
<button class="nav" data-index="4">Cat 4</button>
</div>
<img class="cat cat-1" src="http://placekitten.com/300/200" alt="">
<img class="cat cat-2" src="http://placekitten.com/300/201" alt="">
<img class="cat cat-3" src="http://placekitten.com/301/200" alt="">
<img class="cat cat-4" src="http://placekitten.com/301/201" alt="">
// get all cats
const cats = document.querySelectorAll('.cat')
// gets nav container
const nav = document.querySelector('.navigation')
// for each cat
for (let i = 0; i < cats.length; i++) {
// select current cat
const chosenCat = cats[i];
// create button for it
const button = document.createElement("button");
// add some text to button
button.innerHTML = `Cat ${i + 1}`;
// create onclick function that hides all cats and reveals current
button.onclick = () => {
// use Array.prototype.slice.call because you cant iterate the NodeList
Array.prototype.slice.call(cats).forEach(cat => cat.style.opacity = 0);
chosenCat.style.opacity = 1;
};
// add button to nav container
nav.appendChild(button);
}
// reveal initial cat
cats[0].style.opacity = 1;
.cat {
opacity: 0;
position: absolute;
transition: opacity 0.5s ease-in-out;
top: 0;
}
.navigation {
margin-top: 200px;
}
<img class="cat cat-1" src="http://placekitten.com/300/200" alt="">
<img class="cat cat-2" src="http://placekitten.com/300/201" alt="">
<img class="cat cat-3" src="http://placekitten.com/301/200" alt="">
<img class="cat cat-4" src="http://placekitten.com/301/201" alt="">
<div class="navigation">
</div>
I'm trying to make a menu slider for a restaurant with two clickable menus, the lunch menu and the dinner menu. I don't want the menus opening in a new window, just a clean click and the wanted menu opens.
Here is the code I have so far, I know it needs a lot of work, I'm new to the javascript/jQuery world. Pure javascript would be cool but anything jQuery would work too.
If someone can help me and please explain what needs to be fixed so i can understand this more I would greatly appreciate it. Thank You. On codepen
let lunchContainer = document.querySelectorAll('div.lunchmenu');
dinnerContainer = document.querySelectorAll('div.dinnermenu');
function reset() {
for(let i = 0; i < lunchContainer.length; i++) {
lunchContainer[i].style.display = 'none';
dinnerContainer[i].style.display = 'none';
}
};
$('.lunch').click(function(event) {
reset();
$('.lunchmenu').addClass('active');
lunchContainer.style.display = 'block';
});
$('.dinner').click(function() {
reset();
$('.lunchmenu').removeClass('active');
});
$('.dinner').click(function(event) {
reset();
$('.dinnermenu').addClass('active');
// dinnerContainer.style.display = 'block';
});
$('.lunch').click(function() {
reset();
$('.dinnermenu').removeClass('active');
// dinnerContainer.style.display = 'block';
});
<div class="page">
<div class="header">
<div class="logoHeader">
<a href="index.html" >
<img class="crab" src="http://images.all-free-download.com/images/graphicthumb/vivid_hand_drawn_crab_decoration_pattern_vector_551463.jpg " alt="KingChef Krab logo">
</a>
<h1 id="titleHeader">
King Chef
</h1>
</div>
<nav class="menuHeader">
<a class="specMenu" href="about.html">about</a></li>
<a class="specMenu" href="team.html">team</a></li>
<a class="specMenu" href="menus/dinner.html">menu</a></li>
<a class="specMenu" href="#">news</a></li>
<a class="specMenu" href="#">hours</a></li>
<a class="lastMenu" href="#">reservations</a></li>
</nav>
</div>
<nav id="menuCategory">
<a class="menuStyles lunch" href="#lunch">lunch</a>
<a class="menuStyles dinner" href="#dinner">dinner</a>
</nav>
<div class="container">
<div class="lunchmenu">
<p>hehehfdsafhkalfj</p>
</div>
<div class="dinnermenu">
<p>hdhfsahf</p>
</div>
</div>
</div>
.lunchmenu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.active {
display: block;
}
}
.dinnermenu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.active {
display: block;
}
}
Notice how much code I removed! You don't need to set display if you're going to use an 'active' class to do that job and you don't need to define the behavior of a click on your buttons twice.
Also, if each menu has a container, you don't need to iterate over all the items inside of them to set their display to none, setting the parent container to none will suffice.
Hope that helps!
let lunchContainer = document.querySelectorAll('.lunchmenu'), // notice ',' instead of ';'
dinnerContainer = document.querySelectorAll('.dinnermenu');
$('.lunch').click(function(event) {
$('.dinnermenu').removeClass('active');
$('.lunchmenu').addClass('active');
});
$('.dinner').click(function() {
$('.lunchmenu').removeClass('active');
$('.dinnermenu').addClass('active');
});
.lunchmenu, .dinnermenu {
display:none;
}
.active {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="lunch">lunch</button>
<button class="dinner">dinner</button>
<div class="lunchmenu">
<h5>lunch menu yayyy</h5>
<p>item lunch 1</p>
<p>item lunch 2</p>
</div>
<div class="dinnermenu">
<h5>Dinner menu yayyy</h5>
<p>itemdinner 1</p>
<p>item dinner 2</p>
</div>
So I'm in the process of creating a pretty simple jQuery/CSS slideshow for a course of mine. It's about ten pages long, and right now it works fine if you want to just go from beginning to end in that order, but if you need to refresh the page for any reason, it sends you back to the first page. Since it's on the longer end, I'd like to be able to "click" to a certain page... is this possible without getting too complicated?
Here's my jQuery
function checkNav() {
if ($('.active-slide').hasClass('first')) {
$('.prev').hide();
$('.next').show();
} else if ($('.active-slide').hasClass('last')) {
$('.next').hide();
$('.prev').show();
} else {
$('.next').show();
$('.prev').show();
}
}
var main = function() {
checkNav();
$('.next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next('.slide');
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
//if nextslide is last slide, go back to the first
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(1100).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
checkNav();
});
//prev slide function
$('.prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev('.slide');
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
//if prevslide is last slide, go back to the first
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
checkNav();
});
};
$(document).ready(main);
And here's a rough markup of what the HTML looks like
<div class="slide active-slide first">
<div class="content">
<p>First Slide</p>
</div>
</div>
<div class="slide">
<div class="content">
<p>second slide</p>
</div>
</div>
<div class="slide last">
<div class="content">
<p>third slide</p>
</div>
</div>
<div class="slider-nav">
<div class="prev">prev</div>
<ul class="dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<div class="next">next</div>
</div>
Here's the jsFiddle ... I'd like to be able to click on one of the bullets and go to that corresponding slide....
$('ul.dots li').click(function(){
var num = $(this).index();
var currentSlide = $('.active-slide');
var nextSlide = $('.slide:eq('+num+')');
var currentDot = $('.active-dot');
var nextDot = $(this);
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
checkNav();
});
Add IDs to the divs. For instance:
<div class="slide active-slide first" id="1">
<div class="content">
<p>First Slide</p>
</div>
</div>
<div class="slide" id="2">
<div class="content" >
<p>second slide</p>
</div>
</div>
<div class="slide last" id="3">
<div class="content">
<p>third slide</p>
</div>
</div>
Then you can target specific slides using something like:
<ul class="dots">
<li class="dot active-dot"><a onclick="goto(1)">•</a></li>
<li class="dot"><a onclick="goto(2)">•</a></li>
<li class="dot"><a onclick="goto(3)">•</a></li>
</ul>
<script>
function goto(slide){
$(".slide").removeClass("active-slide");
$("#"+slide).addClass("active-slide");
$("#"+slide).show();
}
We need a way to "index" these items, I will do it by child so add a parent div class called slider:
<div id="slider">
...slides here...
</div>
You need to use localStorage (used to save data between pages) to keep track of both what slide you are on and what dot you are on in the nav bar. This can save data even when we leave the page (when it refreshes), making it so we still know our last page we where on. I will use this to keep track of the current index of each slide. So when the page loads we need to check that if our localStorage item exist:
// If we have saved data add it's index to active-slide
if(localStorage.getItem("activeSlide")) {
$("#slider div.slide")
.eq(localStorage.getItem("activeSlide"))
.addClass("active-slide");
$('.dots li.dot')
.eq(localStorage.getItem("activeSlide"))
.addClass("active-dot");
} else { // Otherwise make them both 0
$("#slider div.slide")
.eq('0')
.addClass("active-slide");
$('.dots li.dot')
.eq('0')
.addClass("active-dot");
}
Then when we move to the next slide next or the last slide prev we update the localStorage item to the current index of the item in active-slide:
// Make the current index of the item in active slide our updated variable
localStorage.setItem( "activeSlide",
$("#slider div.slide").index($(".active-slide")) );
Here is a working example
This way when the page refreshes we stay on the last slide we where looking at before.
<!doctype html>
<html>
<head>
<style>
body{
text-align: center;
}
#slideshow{
margin:0 auto;
width:600px;
height:450px;
overflow: hidden;
position: relative;
}
#slideshow ul{
list-style: none;
margin:0;
padding:0;
position: absolute;
}
#slideshow li{
float:left;
}
#slideshow a:hover{
background: rgba(0,0,0,0.8);
border-color: #000;
}
#slideshow a:active{
background: #990;
}
.slideshow-prev, .slideshow-next{
position: absolute;
top:180px;
font-size: 30px;
text-decoration: none;
color:#fff;
background: rgba(0,0,0,0.5);
padding: 5px;
z-index:2;
}
.slideshow-prev{
left:0px;
border-left: 3px solid #fff;
}
.slideshow-next{
right:0px;
border-right: 3px solid #fff;
}
</style>
</head>
<body>
<div id="slideshow">
«
<ul>
<li><img src="1.jpg" alt="photo1" /></li>
<li><img src="2.jpg" alt="photo2" /></li>
<li><img src="3.jpg" alt="photo3" /></li>
<li><img src="4.jpg" alt="photo4" /></li>
</ul>
»
</div>
<!--
We use Google's CDN to serve the jQuery js libs.
To speed up the page load we put these scripts at the bottom of the page
-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//an image width in pixels
var imageWidth = 600;
//DOM and all content is loaded
$(window).ready(function() {
var currentImage = 0;
//set image count
var allImages = $('#slideshow li img').length;
//setup slideshow frame width
$('#slideshow ul').width(allImages*imageWidth);
//attach click event to slideshow buttons
$('.slideshow-next').click(function(){
//increase image counter
currentImage++;
//if we are at the end let set it to 0
if(currentImage>=allImages) currentImage = 0;
//calcualte and set position
setFramePosition(currentImage);
});
$('.slideshow-prev').click(function(){
//decrease image counter
currentImage--;
//if we are at the end let set it to 0
if(currentImage<0) currentImage = allImages-1;
//calcualte and set position
setFramePosition(currentImage);
});
});
//calculate the slideshow frame position and animate it to the new position
function setFramePosition(pos){
//calculate position
var px = imageWidth*pos*-1;
//set ul left position
$('#slideshow ul').animate({
left: px
}, 300);
}
</script>
</body>
</html>
I have for images with a number on it. Those numbers are 1-4. I want to place them numerically and when the user clicks on 1, i want them to go to slide 1 and if they click on 2, then slide 2. This also needs to have a sliding effect.
I am using this particular javascript code below for left and right options but i am not sure if I can re-use this for my purpose:
HTML would be something like:
<img src="#" class="image_one">
<img src="#" class="image_two">
<img src="#" class="image_three">
<img src="#" class="image_four">
<div class="content_for_image_One" id="slide1">
You see this when you click on image 1
</div>
<div class="content_for_image_two" id="slide2">
You see this when you click on image 2
</div>
<div class="content_for_image_three" id="slide3">
You see this when you click on image 3
</div>
<div class="content_for_image_four" id="slide4">
You see this when you click on image 4
</div>
<script type="text/javascript">
$(document).ready(function () {
var $sliderMask = $('#slider_mask');
var $slideContainer = $('#slide_container');
var $slides = $slideContainer.find('.slide');
var slideCount = $slides.length;
var slideWidth = $sliderMask.width();
$slideContainer.width(slideCount * slideWidth);
$slides.width(slideWidth);
var currentSlide = 0;
function animate() {
$slideContainer.stop().animate({ marginLeft: -(currentSlide * slideWidth) + 'px' }, 'slow');
}
$('#left_button').on('click', function () {
currentSlide = (currentSlide - 1 + slideCount) % slideCount;
animate();
});
$('#right_button').on('click', function () {
currentSlide = (currentSlide + 1) % slideCount;
animate();
});
$('#click_left').on('click', function () {
currentSlide = (currentSlide - 1 + slideCount) % slideCount;
animate();
});
$('#click_right').on('click', function () {
currentSlide = (currentSlide + 1) % slideCount;
animate();
});
});
</script>
Your provided html does not fit to your code, but let's assume you have the following html:
<div id="slidesWrapper">
<div id="slidesContainer">
<div class="slide"><!-- your html --></div>
<div class="slide"><!-- your html --></div>
<div class="slide"><!-- your html --></div>
<div class="slide"><!-- your html --></div>
</div>
</div>
<div id="thumbnails">
<img src="#" class="thumb" />
<img src="#" class="thumb" />
<img src="#" class="thumb" />
<img src="#" class="thumb" />
</div>
with the following css:
#slidesWrapper {
width: 1000px;
height: 400px;
overflow: hidden;
position: relative;
}
#slidesContainer {
width: auto;
position: aboslute;
}
.slide {
float: left;
height: 400px;
}
you could use something like:
(function($){
$(function() {
var wrapper = $('#slidesWrapper'),
container = $('#slidesContainer'),
slides = container.children(),
thumbs = $('#thumbnails').children();
container.css('left', '0');
thumbs.click(function() {
var index = $('thumbnails').children().index(this);
container.stop().animate({
left: '-' + slides.eq(index).position().left + 'px'
}, 1000);
});
});
})(jQuery);
its not tested though and I dont quite get what you want. This example fits if you have a wrapper with slides in it and only one can be visible, fixed width and height
function next()
{
var mar=$("#img_ul").css("margin-left");
var nm=mar.replace("px","");
if(nm==0)
{
$("ul").animate({"marginLeft":"-500px"},"slow");
}
else if(nm>0 || nm!=-2000)
{
nm=nm-500;
$("ul").animate({"marginLeft":nm+"px"},"slow");
}
else if(nm==-2000)
{
$("ul").animate({"marginLeft":"0px"},"slow");
}
}
function previous()
{
var mar=$("#img_ul").css("margin-left");
var nm=mar.replace("px","");
if(nm==0)
{
$("ul").animate({"marginLeft":"-2000px"},"slow");
}
else
{
nm=+nm + +500;
$("ul").animate({"marginLeft":nm+"px"},"slow");
}
}
</script>
</head>
<body>
<div id="slide_wrapper">
<ul id="img_ul">
<li>
<q>
Learn everything you can, anytime you can, from anyone you can there will always come a time when you will be grateful
you did.
</q>
</li>
<li>
<q>
Make it simple. Make it memorable. Make it inviting to look at. Make it fun to read.
</q>
</li>
<li>
<q>
If plan A fails, remember there are 25 more letters.
</q>
</li>
<li>
<q>
Do not go where the path may lead, go instead where there is no path and leave a trail.
</q>
</li>
<li>
<q>
A journey of a thousand miles must begin with a single step.
</q>
</li>
</ul>
</div>
<input type="button" id="previous" value="Previous" onclick="previous();">
<input type="button" id="next" value="Next" onclick="next();">
code from TalkersCode complete tutorial here http://talkerscode.com/webtricks/content-slider-using-jquery-and-css.php