Thumb nail for image slider

sarathlal s asked on March 28, 2014 05:12

How can i add thumbnail for image slider

Recent Answers


Brenden Kehren answered on March 28, 2014 06:11

What plug-in or tool are you using for your slider? You might look into using the bxslider, very easy and customizable free tool.

0 votesVote for this answer Mark as a Correct answer

Michael Gralke Augusto answered on April 1, 2014 10:54

Hi

Are there any sample how to use bxslider within Kentico?

Many thanks,

Mike

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on April 2, 2014 06:50

No, not that I know of. But the process is pretty simple. Add the bxslider .js and .css files to the page. Set a repeater up to list out the doc types you want to use the slider on. Initialize the slider on the page you have your slider on. The link I provided above shows a really simple way to implement it.

One thing I highly recommend is using Kentico Best Practices and storing the files in their correct place. For instance when you save the bxslider.js file, go to Site Manager>Development>JS Files and store it in a folder with the same name as your website code name under the Custom folder. Then link to it like so <script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/Custom/SiteCodeName/bxslider.js"></script> using the javascript webpart on your particular page. I'll typically include the initialization javascript in this webpart as well directly after I include the script file.

What I do with my stylesheets is add them in the Site Manager>Development>CSS Stylesheets as a new stylesheet and link to them using the same HEAD HTML code webpart like so <link href="/CMSPages/GetResource.ashx?stylesheetname=CSSCodeName" type="text/css" rel="stylesheet"/>. This allows me to use all the out of the box functionality and still have great control of the content.

One other thing to note, is you will need to modify the jQuery a bit on the bxslider initialization because you cannot use the $ selector. On the example page, simply change $ -> jQuery and you'll be set.

0 votesVote for this answer Mark as a Correct answer

Michael Gralke Augusto answered on April 5, 2014 06:15

Many thanks, I will give it a try

0 votesVote for this answer Mark as a Correct answer

Ryan R answered on April 29, 2014 15:04

Brenden,

I have spent quite a bit of time trying to get both the Flexslider and the bxslider to work.

I am very new to Kentico, so I think I must be missing something very simple.

Can you please write out how to do this step-by-step? I have followed your advice on several threads but am still having an issue. The main thing is I keep getting "Uncaught TypeError: Cannot read property 'bxSlider' of null (index)". For some reason the no conflict thing is not working for me, I have tried a few different methods.

To the Kentico devs: could you please let us know how you implemented the bxslider on your home page?

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.