We Keep Coding

Slick slider not work

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.

Getting images from itunes rss feed and putting the pics in a bxslider

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*/
});
});
});

Jquery JSON plugin colliding with slick carousel

I am relatively new to jquery but i need that script to start working properly.
I have an jquery script for reading JSON data from url. It is working by itself but when i try to load data inside slick carousel, carousel stops working. I think that the problem is inside my script. Please help!
My code:
(function($){
$.fn.scores = function() {
liveScores();
};
function liveScores() {
setTimeout(liveScores, 5000);
var jsonData = "http://url";
$.getJSON(jsonData, function(rawJsonData){
var complete =[];
//var realcatCount = rawJsonData.doc[0].data[0].realcategories.length;
for (realCat = 0; realCat <= 3; realCat ++) {
console.log(realCat);
var basePath = rawJsonData.doc[0].data[0].realcategories[realCat]
var tournament = basePath.tournaments[0].name;
var name = basePath.name;
var matchStatus = basePath.tournaments[0].matches[0].status._id;
var homeTeam = basePath.tournaments[0].matches[0].teams.home.name;
var awayTeam = basePath.tournaments[0].matches[0].teams.away.name;
var time = basePath.tournaments[0].matches[0]._dt.time;
var date = basePath.tournaments[0].matches[0]._dt.date;
var homeScore = basePath.tournaments[0].matches[0].result.home;
var awayScore = basePath.tournaments[0].matches[0].result.away;
var teamIdHome = basePath.tournaments[0].matches[0].teams.home.uid;
var teamIdHAway = basePath.tournaments[0].matches[0].teams.away.uid;
complete.push('<div class="slide-wrapper"><h2>'+tournament+'</h2><h4>'+name+'</h4><div class="score">'+homeScore+ ' vs. '+awayScore+'</div><div class="team home-team"><div class="crest crest-home" style="background:url(http://ls.betradar.com/ls/crest/big/'+teamIdHome+'.png) no-repeat center center;"></div><h3>'+homeTeam+'</h3></div><div class="team away-team"><div class="crest crest-away" style="background:url(http://ls.betradar.com/ls/crest/big/'+teamIdHAway+'.png) no-repeat center center;"></div><h3>'+awayTeam+'</h3></div><div class="overlay"></div><img class="bcg" src="images/bg-live.jpg"></div>');
}
console.log(complete);
$('#results').empty().append(complete);
});
};
})(jQuery);
This is the order i load scripts and plugins at the bottom of the page.
<script type="text/javascript" src="js/scores.js"></script>
<script>
$(document).ready(function() {
$().scores();
});
</script>
<script type="text/javascript" src="js/slick.js"></script>
<script>
$(document).ready(function(){
$('.slider').slick({
dots: true,
arrows: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
fade: true,
cssEase: 'linear'
});
});
</script>
First i load carousels item (JSON data) and then the slick carousel itself.
And the slick carousel works just fine until i put data from my plugin into it.

The code provided is not very good,
for instance you don't know if there are 3 realcats (0,1,2)
don't use json as a variable name, json is a notation, not an good variable name
$.getJSON(jsonData, function(rawJsonData){
var complete =[];
var realcatCount = rawJsonData.doc[0].data[0].realcategories.length;
for (realCat = 0; realCat <= (realcatCount -1); realcatCount ++) {
console.log(realCat);
var basePath = json.doc[0].data[0].realcategories[realCat]
...
The rest of your code seems ok, but not really good.
Try to walk the json path as less as needed.
this would be:
var match = basePath.tournaments[0].matches[0];
var matchStatus = match .status._id;
var homeTeam = match .teams.home.name;
What you need to do is make sure your html is there BEFORE you bind it. so first generate the carrousel items, and then perform the .slick() function
This way you would get:
// Your existingt code..
$('#results').empty().append(complete);
// AND then slick it.. Delete this code from the seperate code block in your html and move it to here..
$('.slider').slick({
dots: true,
arrows: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
fade: true,
cssEase: 'linear'
});
Your problem is that .slick is called BEFORE the html is there (it is derived from a web url)
first create the html, and append it
then do .slick
The resulting (working) code:
https://jsfiddle.net/aeuuymuy/12/

JQuery Cycle plugin- pager with thumbnails below the main images

I am working on jQueryCycle plugin to get the pager with thumbnails below the main images. This is the tutorial I a working.
http://digitalunion.osu.edu/2011/10/18/jquery-cycle-plugin-a-little-tutorial/
The below is my jQuery code I am working on
$(document).ready(init);
function init() {
// dynamically add a div to hold the slideshow's pager
$(".bison_images").before('<div class="pager"></div>');
// now to use the cycle plugin
$(".bison_images").cycle({
pause: 1,
pager: ".pager",
pagerAnchorBuilder: imagePager
});
}
function imagePager(index, slide) {
var slide = jQuery(slide);
var img = slide.children("img").get(0);
return '<img src="' + img.src + '" width="110" height="66" />';
}
Here I am getting the same output as shown in the example link, pasted above. But I want the pager below the main images. I tried it with the following command but there was no success.
$(".bison_images").after('<div class="pager"></div>');
Can anyone suggest me the solution.
Rakesh

enter code here
Check this works...
$('.bison_images').after('<div class="pager">').cycle({
fx: 'scrollHorz',
speed: 'slow',
timeout: 9000,
pager: '.pager',
pagerAnchorBuilder: function(idx, slide) {
var slide = jQuery(slide);
var img = slide.children("img").get(0);
return '<img src="' + img.src + '" width="110" height="66" />';
}
});

Making a series of photos fade in and out sequentially on a web page using Slick

I would like a series of three images to automatically fade in and out over and over looping on the web page without any user input. Upon suggestion in the comments, I have decided to use the Slick library and have generated the following code:
$('.fade').slick({
accessibility: false,
arrows: false,
draggable: false,
autoplay: true,
autoplaySpeed: 3000,
fade: true,
speed: 1000,
swipe: false,
touchMove: false,
});
It works great for one cycle, and then it completely breaks with images flickering and turning black. Does anyone know how to remedy this?

I was able to use code from this Fiddle to accomplish my goals. All I had to do was slightly rework some of the methods, but this is perfectly what I needed.
http://jsfiddle.net/pdb4kb1a/2/
The JavaScript boils down to:
var imgArray = [
'http://placehold.it/300x200',
'http://placehold.it/200x100',
'http://placehold.it/400x300'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function() {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
},1000);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
setTimeout(slideShow, imgDuration);
}
slideShow();