Can't get a simple jquery slider to work - javascript

I am trying to get a jquery slider to work on my site.
I have not programmed it because I cannot, I'm just trying to use something that is there and works on the demo site. I have tried several ready to use jquery slideshow and sliders, without any success. I have now found the simplest one available, I think but cannot make this one work either although I think I have followed all the steps instructed..
The one I have now is from "http://responsiveslides.com/", all the files are on Github though:
https://github.com/viljamis/ResponsiveSlides.js
I have put this in my html <head>
<!-- Slideshow begin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$("#slider1").responsiveSlides({
auto: true,
speed: 500,
timeout: 4000
});
});
</script>
and this in my html
<div class="welcome section"><!-- welcome section begin -->
<img src="mobile/media/logo2s.jpg" alt="" style="display:block; margin-left:auto; margin-right:auto;">
<div id="wrapper">
<ul class="rslides" id="slider1">
<li><img src="mobile/media/p_0001.jpg" alt=""></li>
<li><img src="mobile/media/p_0002.jpg" alt=""></li>
<li><img src="mobile/media/p_0003.jpg" alt=""></li>
</ul>
</div>
</div><!-- welcome section end -->
The responsiveslides.min.js is on the server under directory js, which is in the same directory as my html. I have also added relevant CSS to my .css file, however the slider does not slide.
No transitions at all.
I don't think I have missed anything but obviously I have. Can anyone help?

Follow everything on the page.
You have this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
You need this (remember to change .jpg file names to 1, 2, etc.):
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
And all the CSS:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
Just don't put an id; keep it as it was:
<script>
$(function() {
$(".rslider").responsiveSlides({
auto: true,
speed: 500,
timeout: 4000
});
});
Hope it works!

Related

tiny-slider not centering images properly

I'm trying to use tiny-slider, small vanilla js carousel lib but I'm having issues centering the image when displaying only one item per slide.
var slider = tns({
container: '.slide',
items: 1,
mode: 'carousel',
slideBy: 'page',
autoplay: false,
mouseDrag: true,
center: false,
nav: false
});
.container {
width: 100%;
}
ul {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css" rel="stylesheet"/>
<div class="container">
<ul class="slide">
<li><img src="https://via.placeholder.com/720x460" alt=""></li>
<li><img src="https://via.placeholder.com/720x460" alt=""></li>
<li><img src="https://via.placeholder.com/720x460" alt=""></li>
</ul>
</div>
I tried using display: block; margin: 0 auto; to images, but the images are slightly off to the right.
The github issue pages haven't been helpful with this specific case, so any help is appreciated.
Each li produced by tiny-slider has a class of 'tns-item'.
You need to add a css rule for that like :
li.tns-item{
text-align:center;
}

ResponsiveSlides doesn't display pager

i'm using ResponsiveSlides to make a slide of some pictures, but i have some issues.
First of all, automatic slide after a timeout doesn't work..
But my first problem is that i can't see the pager under the pictures, though i've enabled it! The pager is this: http://i.imgur.com/cCV4AOP.png (the number of the picture under the slide)
Sorry for my english and sorry i'm a noob on js & css..
This is my html code:
Head:
<script src="js/responsiveslides.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$("#slider").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540,
});
});
</script>
Css:
/*! http://responsiveslides.com v1.54 by #viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 90%;
padding: 0;
margin: 55px;
top: -50px;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 90%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 90%;
border: 0;
}
Slider on my html page:
<ul class="rslides" id="slider">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
Why i dont see the pager?
I haven't figured out why yet but if you switch the order in which you reference your external scripts, it fixes the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
The page links are unformatted "ul > li > a" so to get the appearance of the ResponsiveSlides website, you need to add your own CSS or modify theirs.

jQuery - Animation flickering? (IE8)

This code does what I need it to but it has an annoying flicker as it's doing it. What it does is at the base I have an inline list contained in a "large" div (navContainer) and on top of the large div is a smaller div (smallNavContainer). As the large div below is moved left or right the the smaller div displays a different part of the list. When I'm using "margin-left" it works but there is an annoying flicker and if I use just "left" there is no flicker but div once the area that was displayed is offscreen none of the rest of the list that is moving in is displayed. Is there any way to get rid of the flicker from marginLeft? or is there a way to make the rest of the list render when I use "left".
jQuery
$('#capeBtnsPrevTab').live("click",function()
{
$("#navContainer").animate({"margin-left": "+=468"}, 1000, function(){
});
});
$('#capeBtnsNextTab').live("click",function()
{
$("#navContainer").animate({"margin-left": "-=468"}, 1000, function(){
});
});
CSS
.floatIt
{
float:left;
}
div#smallNavContainer
{
left: 50%;
position: absolute;
z-index:0;
overflow:hidden;
width: 780px;
height: 88px;
margin-left:-392px;
margin-top: 72px;
}
#navContainer
{
position: relative;
margin-left:-506px;
margin-top:0px;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 0px;
padding-left: 0px;
margin-right: -2px;
margin-left: -2px;
}
HTML
<img class="floatIt" id="capeBtnsPrevTab" src="btn_1.png" alt="Previous"/></a>
<div class="floatIt" id="smallNavContainer">
<div id="navContainer">
<ul id="navlist">
<li><img id="btn9" src="menu_one.jpg"/></li>
<li><img id="btn10" src="menu_two.jpg"/></li>
<li><img id="btn11" src="menu_three.jpg"/></li>
<li><img id="btn1" src="menu_four.jpg"/></li>
<li><img id="btn2" src="menu_five.jpg"/></li>
<li><img id="btn3" src="menu_six.jpg"/></li>
<li><img id="btn4" src="menu_seven.jpg"/></li>
<li><img id="btn5" src="menu_eight.jpg"/></li>
<li><img id="btn6" src="menu_nine.jpg"/></li>
<li><img id="btn7" src="menu_ten.jpg"/></li>
<li><img id="btn8" src="menu_eleven.jpg"/></li>
</ul>
</div>
</div>
<a><img class="floatIt" id="capeBtnsNextTab" src="UI/btnNext_n.png" alt="Next"/></a><br/>
using % instead of += or -= may help but not sure about it
I figured out what the flickering was, it was IE prematurely removing each button when the edge of it crossed off of the rendered div.

jQuery Slider performing unexpectedly?

I have, after many tutorials and lots of time, managed to build a slider with jQuery. However, it's not working as smoothly as I would have hoped. I have used a custom handle, and seeing as the new jQueryUI doesn't have a handle option, I have created a handle in CSS. However, this handle is going beyond the required bounds of the slider. I have uploaded a test page which can be found here.
My code is as follows:
CSS
<style type="text/css" media="screen">
<!--
body {
padding: 0;
font: 1em "Trebuchet MS", verdana, arial, sans-serif;
font-size: 100%;
background-color: #212121;
margin: 0;
}
h1 {
margin-bottom: 2px;
}
#container {
background-color: #fff;
width: 580px;
margin: 15px auto;
padding: 50px;
}
/* slider specific CSS */
.sliderGallery {
background: url(productbrowser_background_20070622.jpg) no-repeat;
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 560px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
.slider {
width: 542px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
.ui-slider-handle {
position: absolute;
cursor: default;
height: 17px;
top: 0;
background: url(productbrowser_scroller_20080115.png) no-repeat;
z-index: 100;
}
.slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
}
.slider .slider-lbl1 {
left: 50px;
}
.slider .slider-lbl2 {
left: 220px;
}
.slider .slider-lbl3 {
left: 156px;
}
.slider .slider-lbl4 {
left: 280px;
}
.slider .slider-lbl5 {
left: 455px;
}
-->
</style>
jQuery
<script src="jqueryui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth() + 50;
$('.handle', container).slider({
min: -50,
max: itemsWidth,
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
Body
<div id="container">
<div class="sliderGallery">
<ul>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
</ul>
<div class="slider ui-slider">
<div class="handle"></div>
<span class="slider-lbl1">Our Books</span>
<span class="slider-lbl2">Other Books</span>
</div>
</div>
</div>
What I'd like to know is if there is any way to force the slider bar to stay inside the image behind it? The test link will let you understand what I mean if I didn't explain myself clearly.
Thanks in advance,
Dronnoc
The problem is coming from the fact that your handle is set to go outside of it's container.
The two problems are coming from the following
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
The second line says that the slider is allowed to go 90px before the left of it's initial container (hence the left overflow)
And when setting the left of the handle to 100%, it means that it will overflow on the right from 90px (180-90).
The way I would handle that would be to drop the margin-left:-90px;, to reduce the width of the scrolling div by 180px and to use another div to display the scroll bar image (positioned under your sliding div, but wider).
Something like:
.slider {
width: 362px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
}
.ui-slider .ui-slider-handle {
width:180px;
}
.sliderImg{
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
/*add css to position it correctly here*/
}
EDIT: To answer to your comment, the following correction to the CSS on your page should make that work:
.slider {
/*let the rest as is*/
margin-left: 90px;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
This combination will let it with the same boundaries (-90 + 90 = 0 ) but are going to make it move nicely.
EDIT2:
TO enable the click on the handle, you'll need to specify a height to your handle (otherwise you wouldn't be able to click on it). However this will move your span under the sliding div, to overcome it you'll have to specify their top position (as you already have them in absolute it's easy ;) ).
The following should do.
.handle {
height: 100%;
}
.slider span {
/*let the rest as is*/
top: 0;
}
To make that work above the span, you'll need to change your html a bit like that:
<div class="handle">
<span id="slider-tags" class="slider-lbl1">Our Books</span>
<span id="slider-tags" class="slider-lbl2">Other Books</span>
</div>

slideshow using overlapping transparent images

I have looked at the very helpful suggestions for the css for handling a bunch of exactly overlapping transparent images placed on a non-transparent image (in my case, a map but not a google-type map, just a line drawing). Could someone help me with turning that into a slideshow? I want to progressively stack images directly on top of each other so that the user sees an accumulation of visual information.
Here's a very simplified implementation: http://jsfiddle.net/r7B4n/
JavaScript:
$('#showNext').click(function(e){
e.stopPropagation();
$('#slideShow li:hidden:first').fadeIn();
});
CSS:
#slideShow {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #444;
list-style: none;
margin: 0;
padding: 0;
background: url(http://dummyimage.com/300x200/ccc/fff)
}
#slideShow li {
position: absolute;
left: 0; top: 0;
display: none
}
HTML:
<ul id="slideShow">
<li><img src="http://i.stack.imgur.com/hCTLO.png" /></li>
<li><img src="http://i.stack.imgur.com/Zm25l.png" /></li>
<li><img src="http://i.stack.imgur.com/3Rtc5.png" /></li>
<li><img src="http://i.stack.imgur.com/cg3MF.png" /></li>
</ul>
Show next image

Categories

Resources