i have an image stored in my sql and i want to place it in slick slider , why the slider not contain the images in it
,result
function displayImg(data) {
var imgs = data.pics;
console.log(imgs);
for(var j=0;j<imgs.length;j++)
{
$('.slider').append('<li><img src="' + imgs[j].img + '"/></li>');
}
$(".slider").slick({
autoplay: true,
dots: true,
slide: 'li',
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
}
//html
<div data-role="content" id="pic">
<section class="slider">
</section>
</div>
You are not adding the images to your slider container. You are adding them to your wrapper.
Instead of this:
$('#pic').append('<li><img src="' + imgs[j].img + '"/></li>');
Use this
$('.slider').append('<li><img src="' + imgs[j].img + '"/></li>');
Images are never stored in the database (SQL databases) you have to store it's URL in the database , example: localhost:80/files/imgs/myimage.png and use the link to refer to the image you want.
Related
I have a basic slickJS 1.8 Carousel and trying to modify how pagination looks. There are many stackoverflow similar questions however none worked for me. Carousel works, I can swipe on left and right, dots work fine however I'd like to achieve this presentation when it comes to navigation <- 1/3 -> (where -> or <- is an icon) Here is the setup
var $status = $('.count');
var $slickElement = $('.carousel');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
var i = (currentSlide ? currentSlide : 0) + 1;
$status.html('<button type="button" class="custom-prev"><</button>' + '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>' + '<button type="button" class="custom-next">></button>');
});
$('.carousel').slick({
infinite: false,
speed: 300,
slidesToShow: 4.5,
slidesToScroll: 4,
arrows: true,
nextArrow: $('.custom-next'),
prevArrow: $('.custom-prev'),
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
Next and Previous buttons appear however navigation to next slides don't work but dots work. Disabled dots for didn't make any difference to my custom next and previous buttons, is there anything I'm doing wrong? I'm not a JS expert hence some guidance would be appreciated.
You can fix this with a few amends here but you will still need to tweak it to get the presentation you want. See comments in code for explanation.
Example: https://codepen.io/alexpetergill/pen/56c63447c77c07e84407f08016cf17b2
var $status = $('.count');
var $slickElement = $('.slick-slider');
// You only need to add the controls on init. Anything more will probably result in issues with behaviour.
$slickElement.on('init', function () {
$status.before('<button type="button" class="custom-prev"><</button>' + '<button type="button" class="custom-next">></button>');
});
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
var i = slick.currentSlide + 1; // This will get you the current slide on init.
$status.html('<span class="current_slide">' + i + '</span> / <span class="total_slides">' + slick.slideCount + '</span>');
});
// I've simplified this for sake of example. You have to bare in mind that if your slidesToShow is more than 1 then your numbered pagination probably wont work how you expect as the number will reflect the first item in a row.
$('.slick-slider').slick({
infinite: false,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
nextArrow: $('.custom-next'),
prevArrow: $('.custom-prev'),
});
// Not having the arrow controls within the slick container probably results in the event listeners not being added. You can simply add them yourself here.
$('.custom-prev').click(function(){
$slickElement.slick('slickPrev');
})
$('.custom-next').click(function(){
$slickElement.slick('slickNext');
})
I have a needed that I've not been able to develop.
I'm using slick to show 3 slides, but only the center one shows all the information. I need an infinite slider in order to get all the slides being at the center.
The problem is when the slides are only 3, because it stops. I would need to force the slider clonning the slides as if i had 4 or more slides...
$('.center').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
adaptiveHeight: true
});
Here I leave you an example with slides enough: https://jsfiddle.net/f580ys4b/1/
And here an example with only 3 slides: https://jsfiddle.net/f580ys4b/2/
Before initiating Slick, check if the number of slide items is larger than slidesToShow. In case it is not, duplicate the children until there are more slide items than slides to show. Can easily be done with jQuery.
var slideCount = jQuery(".slide").length;
if (slideCount <= 3) {
// clone element
jQuery(".center.slider").children().clone(true, true).appendTo(".center.slider");
}
jQuery('.center').slick({
arrows: false,
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
focusOnSelect: true,
adaptiveHeight: true
});
My solution based on Rohan answer:
In my case I have a slider with filters, when the filtered elements are the same as the elements to be displayed, the infinite dont working. When I reset the slider when filtering I compare the filtered elements with those that should be displayed and if they are equal I duplicate the elements.
$('.slider-productos').on('reInit', function(event, slick, currentSlide, nextSlide) {
// total sliders number - get option slidesToShow number
// ^ ^
if (slick.slideCount === slick.options.slidesToShow) {
// you can clone on slider or all, it depends on how many slider you want to show
//var toClone = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
var toClone1 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(1)');
var toClone2 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(2)');
var toClone3 = $(".slider-productos .slick-track").children('.slick-slide:nth-of-type(3)');
toClone1.clone().appendTo(".slider-productos .slick-track");
toClone2.clone().appendTo(".slider-productos .slick-track");
toClone3.clone().appendTo(".slider-productos .slick-track");
// Set any option only for refresh slider refresh true
// ^ ^
$('.slider-productos').slick('slickSetOption', 'infinite', true, true);
}
});
So I am able to get the images of the albums from the itunes rss by using this code:
$("#parse").click(function (){
$(".bxslider").html("");
var country = $("#country").val();
var number = $("#top").val();
$.get("https://itunes.apple.com/"+country+"/rss/topsongs/limit="+number+"/xml" , function(data){
var itunesArray = $(data).find("entry");
itunesArray.each(function(){
var image = $(this).find("im\\:image").eq(1).text();
var audio = $(this).find("link").eq(1).attr("href");
HTML for my slider:
<div class="slider">
<ul class = "bxslider">
</ul>
</div>
I try to append the html by using this code:
$('.bxslider').append("<li><img src = "+image + " height = '100'
width ='100' >" + "</li>");
Jquery for slider:
$('.bxslider').bxSlider({
mode: 'fade',
//captions: true,
auto: true,
//autoControls: true
pagerCustom: '#bx-pager'
/*minSlides: 2,
maxSlides: 2,
slideWidth: 170,
slideMargin: 10,
ticker: true,
speed: 7000*/
});
I can get the images into the webpage but not inside the slider. I can see the arrows but I am unable to switch images and can see all of them at once. Im supposed to see them one at a time. I do not know whats going on. Any recommendations would be highly appreciated. Thank you!
I will suggest you to initialize your bxSlider inside $.get Ajax success callback i.e. after all images has been added to DOM (exactly after itunesArray.each() loop).
I think you have not posted the entire code but you can just refer below code and take the idea (this code may not work directly as it is):
$("#parse").click(function (){
$(".bxslider").html("");
var country = $("#country").val();
var number = $("#top").val();
$.get("https://itunes.apple.com/"+country+"/rss/topsongs/limit="+number+"/xml" , function(data){
var itunesArray = $(data).find("entry");
itunesArray.each(function(){
var image = $(this).find("im\\:image").eq(1).text();
var audio = $(this).find("link").eq(1).attr("href");
$('.bxslider').append("<li><img src = "+image + " height = '100' width ='100' >" + "</li>");
});//each loop end
$('.bxslider').bxSlider({
mode: 'fade',
//captions: true,
auto: true,
//autoControls: true
pagerCustom: '#bx-pager'
/*minSlides: 2,
maxSlides: 2,
slideWidth: 170,
slideMargin: 10,
ticker: true,
speed: 7000*/
});
});
});
I bought a theme from a website, and i have some problems with bxslider...when on the last slide, it does not show next slides until the last slide gets to the front of the slider, which does not look good. you can see the preview HERE. and the bought theme HERE
here is the code that generates the slides:
<ul class="top_video_slider">
<?=$this->topRestaurants(45.8, 23.0);?>
</ul>
$this->topRestaurants() returns the $string generated like so:
foreach($topRest as $restaurant) {
$slug = $service->create($restaurant['name'], false) . '-' . $restaurant['id'];
$photos = explode(',', $restaurant['images']);
$string .= '<li>
<div class="video_holder">
<img src="/uploads/'.$photos[0].'" alt="image">
</div>
</li>';
}
the jquery for it looks like this:
$('.top_video_slider').bxSlider({
slideMargin: 10, useCSS: false,
pager: true, auto: true, autoHover:true,
onSliderLoad: function(currentIndex){
$(".top_video_slider").css("visibility", "visible");
}});
can you please please help me? thanks!
I managed to fix it using the "maxSlides" option from bxslider...i modified it to be less than the total of slides.
the jquery looks like so:
$('.top_video_slider').bxSlider({
slideMargin: 10, useCSS: false,
pager: false, auto: true, autoHover:true, infiniteLoop: true, maxSlides: 8,
onSliderLoad: function(currentIndex){
$(".top_video_slider").css("visibility", "visible");
}});
All the slides show now, but there is no space next to the last one
I'm working on implementing a flickr feed to a page inside of a slick.js slider.
I've been able to load the images into the slider, but the images has varied widths and are displaying a little wonky. each div being created adopts the same width, even if the image inside it is thinner.
See page here: http://abenjamin765.github.io/pushpinevents
html
<div class="slider" style="width:500px; background:#666;">
</div>
JS
$(document).ready(function() {
$('.slider').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: true
});
$.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157647565496672&nsid=127682596#N07&lang=en-us&format=json&jsoncallback=?', function(data) {
$.each(data.items, function(i,item) {
var squares = (item.media.m).replace('_m.jpg', '_q.jpg');
var large = (item.media.m).replace('_m.jpg', '_b.jpg');
if(i <= 20){
$('.slider').slickAdd('<div class="slide-img"><img src="' + large + '"/></div>');
}
});
});
});