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;
}
Related
I am trying to create a slider that will work on hover but there is one thing I would like to add is reset. For example, if visitor hovers on the slideshow and he is on 4th image then when he hovers out and hover on it again then slide should start from image 1, not from image 4.
Please Help!
Here is the code.
jQuery(function($) {
$('.slides').cycle({
fx: 'none',
speed: 4000,
timeout: 70,
}).cycle("pause");
$('.slideshow-block').hover(function() {
$(this).find('.slides').addClass('active').cycle('resume');
}, function() {
$(this).find('.slides').removeClass('active').cycle('pause');
});
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
.slideshow-block {
position: relative;
width: 1150px;
height: 530px;
overflow: hidden;
background: url('img/3-1.png');
}
.slides {
z-index: 0;
visibility: hidden;
}
.slides.active {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="slideshow-block">
<ul class="slides">
<li><img src="img/3-1.png" /></li>
<li><img src="img/3-2.png" /></li>
<li><img src="img/3-3.png" /></li>
<li><img src="img/3-4.png" /></li>
<li><img src="img/3-5.png" /></li>
<li><img src="img/3-6.png" /></li>
</ul>
</div>
This may help you:
$('.slideshow-block').hover(function(){
setTimeout(function () {
$('.slides').cycle(0);
}, 100);
$(this).find('.slides').addClass('active').cycle('resume');
}, function(){
$(this).find('.slides').removeClass('active').cycle('pause');
});
I need to add the caption with in the image of slider and have to move each sliders,when clicked the respective captions.
I have added the captions: true in javasript,but still the captions are outside the images.And I need to customize the captions and replace them as text for the sliders.I have attached a sample image below to explain what I need. I have attached my code as well.
What changes I have to do to my code to get captions like this.
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
$('.bxslider').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
auto: true,
autoStart: true,
autoDirection: 'next',
autoHover: true,
pause: 3000,
autoControls: false,
pager: true,
pagerType: 'full',
controls: true,
captions: true,
speed: 1200,
slideWidth: 800
});
</script>
You should add a figure tag with a figcaption within your li list items, but they work. (I suppose you could add a span either?.. just thought of that)
If you opt to use to add the span, you would need to add display:block; to the css.
The figcaption with the caption text should be contained within the figure tag. Span tags should be included BEFORE the end of the closing </li>
For example (I've used figcaption here)
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
* {
margin: 0px;
padding: 0px;
}
.bxslider li img {
width: 200px;
height: 125px;
margin: 0px 5px;
padding: 10px 3px;
}
.bxslider {
list-style-type: none;
}
.bxslider li {
display: inline-block;
}
figcaption {
padding: 0!important;
margin: 0!important;
color: #2F4F4F;
text-align: center;
position: relative;
}
figure:hover,
figcaption:hover {
color: forestgreen;
background-color: yellow;
}
figure:active,
figcaption:active {
color: forestgreen;
background-color: blue;
}
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="http://bxslider.com/js/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<ul class="bxslider">
<li>
<figure><img src="http://www.rachelgallen.com/images/daisies.jpg" />
<figcaption>Daisies</figcaption>
</figure>
</li>
<li>
<figure><img src="http://www.rachelgallen.com/images/snowdrops.jpg" />
<figcaption>Snowdrops</figcaption>
</figure>
</li>
<li>
<figure><img src="http://www.rachelgallen.com/images/mountains.jpg" />
<figcaption>Mountains</figcaption>
</figure>
</li>
<li>
<figure><img src="http://www.rachelgallen.com/images/yellowflowers.jpg" />
<figcaption>Yellow Flowers</figcaption>
</figure>
</li>
</ul>
the background color/padding/margin sizes are just for example, edit as you see fit..
Hope this helps
Fiddle
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!
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.
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