JS/CSS thumbnail slider for additional images

**kobra** · 26 Mar 2016, 10:07 AM

Try moving the jscript file to includes/modules/pages/product_info/
Then check your view source

I tried your link and in the source I could not find "myCarousel Additional Image Slider"

**Feznizzle** · 26 Mar 2016, 03:16 PM

Originally Posted by kobra

Try moving the jscript file to includes/modules/pages/product_info/
Then check your view source

I tried your link and in the source I could not find "myCarousel Additional Image Slider"

Something happened! It's wonky... but it's there! Yaaaaahoooo!

**Feznizzle** · 26 Mar 2016, 04:48 PM

To simplify this thing and get it working, I placed css and js into their own files and a separate index.html to call the others. But still couldn't get it to work, even as a standalone!

I will zip and attach in case anybody wants to play with it: slider.zip

I'm going to go back to the page where I got it (http://bootsnipp.com/snippets/3kAkz) and view source there for comparison.

**rbarbour** · 26 Mar 2016, 05:43 PM

Not to point out the obvious but you will also need to download bootstrap, which mean you'll be loading the entire bootstrap CSS file for one slider.

Try this, I recommend this for a responsive slider.

slick, the last carousel you'll ever need

Originally Posted by Feznizzle

To simplify this thing and get it working, I placed css and js into their own files and a separate index.html to call the others. But still couldn't get it to work, even as a standalone!

I will zip and attach in case anybody wants to play with it: slider.zip

I'm going to go back to the page where I got it (http://bootsnipp.com/snippets/3kAkz) and view source there for comparison.

**Feznizzle** · 26 Mar 2016, 05:55 PM

Awesome! Giving it a go right now...

**Feznizzle** · 26 Mar 2016, 06:53 PM

Man, I am dumb. I couldn't get Slick to work either. I followed directions, best I could. *sigh*

I was trying to use Multiple Items (second demo down). I dropped the Slick folder into the folder with my html index. Here is the code I put in my index.html:

Code:

<!doctype html>
<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

<div class="responsive">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
				



  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>


  <script type="text/javascript">
$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  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
  ]
});
  </script>

  </body>
</html>

  </script>

**rbarbour** · 26 Mar 2016, 07:12 PM

rename slick.css to stylesheet_slick.css and upload to:
/includes/templates/YOUR_TEMPLATE_FOLDER/css/

rename slick.js to jscript_slick.js and upload to:
/includes/templates/YOUR_TEMPLATE_FOLDER/jscript/

**Feznizzle** · 26 Mar 2016, 07:19 PM

Where to put the html? I'm happy to continue playing with it on my product page...

And, actually, exactly what html should I use. Should I put it in a separate php module or something, then call it to the product page by using a 'require'?

**rbarbour** · 26 Mar 2016, 07:32 PM

insert it right in the /includes/templates/YOUR_TEMPLATE_FOLDER/templates/tpl_product_info_display.php file

Code:

<div class="responsive">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

  <script type="text/javascript">
$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  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
  ]
});
  </script>

Originally Posted by Feznizzle

Where to put the html? I'm happy to continue playing with it on my product page...

And, actually, exactly what html should I use. Should I put it in a separate php module or something, then call it to the product page by using a 'require'?

Thread: JS/CSS thumbnail slider for additional images

Thread Tools

Search Thread

Display

Hybrid View

Re: JS/CSS thumbnail slider for additional images

Re: JS/CSS thumbnail slider for additional images

Re: JS/CSS thumbnail slider for additional images

Re: JS/CSS thumbnail slider for additional images

Re: JS/CSS thumbnail slider for additional images

Re: JS/CSS thumbnail slider for additional images

Re: JS/CSS thumbnail slider for additional images

Re: JS/CSS thumbnail slider for additional images

Re: JS/CSS thumbnail slider for additional images

Similar Threads

Additional images jquery mini-slider --- is it possible?

Main Image Thumbnail Appear With Additional Images

How do I show the main image as a thumbnail with the additional images?

CSS & additional images

Define thumbnail for large product images?

Posting Permissions