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
Related
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;
}
I will try to explain to you, with my limited english, what I'm trying to do
I have an image gallery on my page and I've created this gallery
with cycle2 and
lightGallery
I have a filter link on my carousel (animal,sports,natural,all)
So what I want to do ?
For example: if I click animal, then only show me [data-id="animal"] div and hide another div different from [data-id="animal"]
What I have done so far ?
I've created my gallery correctly. It works very well so far and as I expect.cycle2 is working and when you click any image then it is opening on popup(lightgallery)
What I haven't done so far ?
Everything is okay until you click any category. When you choose any category, neither cycle2 or lightgallery are working..
Then, after this filtering, lightgallery must work or be generated again (I guess).
More simply what do I want?
Filterable photo/image gallery only this what I want to thing
Any Example that you can show us ?
For example this - only as a logic - but this is the only example and I want to do only using cycle2 and jquery I need improve myself and see something on jquery.
If you check my category id, name, and .item data-id name, I'm sure you will understand what I'm trying to do.
$(document).ready(function() {
function generateSlider() {
$('#myCarousel').cycle({
next: "#single-right",
log: false,
fx: 'fade',
caption: '.cycle-caption',
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<img class='lazyload' data-src='{{exthumbimage}}'' width='60' height='60'>",
prev: "#single-left",
slides: "div[data-hidden='false']"
});
}
generateSlider();
$('#myCarousel').lightGallery({
selector: "div[data-hidden='false']",
exThumbImage: "data-exthumbimage",
loadYoutubeThumbnail: true,
youtubeThumbSize: 'default',
loadVimeoThumbnail: true,
vimeoThumbSize: 'thumbnail_medium',
});
$("#filter li").on("click", function() {
var activeId = $(this).attr("id");
if (activeId == "show-all") {
$("div").attr("data-hidden", "false");
} else {
$("div").attr("data-hidden", "true");
$("div[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$("#myCarousel").cycle("destroy");
generateSlider();
return false;
});
});
.mySlideShow {
width: 700px;
position: relative;
}
.item img {
cursor: pointer;
}
#single-pager img {
margin: 3px;
cursor: pointer;
width: 60px;
height: 60px;
}
#filter {
position: absolute;
top: 0;
right: 10%;
z-index: 100;
}
#filter li {
display: inline-block;
background: rgba(0, 0, 0, .7);
color: #FFF;
cursor: pointer;
padding: 12px;
}
.cycle-caption {
position: absolute;
bottom: 14%;
left: 0;
padding: 12px;
background: rgba(0, 0, 0, .5);
color: #FFF;
text-align: center;
width: 100%;
z-index: 100;
}
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>
<div class="mySlideShow">
<div id="myCarousel">
<div class="item" data-src="http://images.freeimages.com/images/previews/49a/massive-gear-1255802.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/fa7/my-ride-1552678.jpg" data-id="animals" data-hidden="false" data-title="image 1">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/f7a/gear-1462890.jpg" />
</div>
<div class="item" data-src="http://images.freeimages.com/images/previews/7ae/autos-1194364.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/5f6/kaputtes-auto-1564173.jpg" data-id="sports" data-hidden="false" data-title="image 2">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/20e/some-grill-1450817.jpg" />
</div>
<div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg" />
</div>
</div>
<div id="single-pager">
</div>
<ul id="filter">
<li id="animals">Animals</li>
<li id="sports">Sports</li>
<li id="natural">Natural</li>
<li id="show-all">All</li>
</ul>
<div class="cycle-caption"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js'></script>
<script src='https://cdn.jsdelivr.net/g/lightgallery#1.3.5,lg-fullscreen#1.0.1,lg-hash#1.0.1,lg-pager#1.0.1,lg-share#1.0.1,lg-thumbnail#1.0.1,lg-video#1.0.1,lg-autoplay#1.0.1'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script>
<script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>
Also, you can see my demo on codepen too
You have to specify in the CSS to make the data-hidden=true actually hidden.
div[data-hidden=true] {
display: none;
}
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 flexslider and I'm trying to add a separate text overlay to each slide, but am not having much luck.
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/350x150">
<div class="RCSlideoverlay">CLICK HERE</div>
</li>
<li>
<img src="http://placehold.it/350x150">
</li>
<li>
<img src="http://placehold.it/350x150">
</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
pauseOnHover: true,
controlNav: true,
directionNav: false,
});
});
</script>
How i handled this was simply added a <span> tag with a class name below the images and then position them with CSS.
HTML:
<li>
<a href="#"><img src="http://placehold.it/660x440" width="100%" height="100%">
<span class="flex-caption">Place Hold It Image</span></a>
</li>
CSS:
/*Caption Text*/
.flex-caption {
bottom:50px;
color: white;
font-size: 16px;
line-height: 20px;
left:0;
padding:0 20px;
position:absolute;
right:0;
text-transform: uppercase;
z-index:1;
}
My flexslider had a black gradient at the bottom so I make my text white so you could read it properly. Hope that helps.
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.