JQuery/Coin Slider Help..

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
13 years ago
Hello All,
I am trying to use a tool called Coin Slider for my Home Page (http://workshop.rs/projects/coin-slider) and am having no luck at all.  Below are the instructions.  I downloaded the jquery-1.4.2.js and coin-slider.min.js files into my Scripts folder but nothing seems to be happening.  

Does anyone have any ideas what I might be missing.

Step 1: Download jQuery, Coin Slider javascript file and CSS file and include them on your page:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

Step 2: Add slider content and create one div with an id and put images and image descriptions, similar to:
<div id='coin-slider'>
  <a href="img01_url" target="_blank">
    <img src='img01.jpg' >
    <span>
      Description for img01
    </span>
  </a>
  ......
  ......
  <a href="imgN_url">
    <img src='imgN.jpg' >
    <span>
      Description for imgN
    </span>
  </a>
</div>

Step 3: At the end all you have to do is to call Coin Slider:
<script type="text/javascript">
  $(document).ready(function() {
    $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
  });
</script>

Thanks for the help!
13 years ago
madv1457 wrote:
Hello All,
I am trying to use a tool called Coin Slider for my Home Page (http://workshop.rs/projects/coin-slider) and am having no luck at all.  Below are the instructions.  I downloaded the jquery-1.4.2.js and coin-slider.min.js files into my Scripts folder but nothing seems to be happening.  

Does anyone have any ideas what I might be missing.

Step 1: Download jQuery, Coin Slider javascript file and CSS file and include them on your page:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

Step 2: Add slider content and create one div with an id and put images and image descriptions, similar to:
<div id='coin-slider'>
  <a href="img01_url" target="_blank">
    <img src='img01.jpg' >
    <span>
      Description for img01
    </span>
  </a>
  ......
  ......
  <a href="imgN_url">
    <img src='imgN.jpg' >
    <span>
      Description for imgN
    </span>
  </a>
</div>

Step 3: At the end all you have to do is to call Coin Slider:
<script type="text/javascript">
  $(document).ready(function() {
    $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
  });
</script>

Thanks for the help!


add this up in the root.cshtml , what version of nop are you using?
13 years ago
Thanks for the reply! I am using 2.4.  

I did however come across the Nop Templates site that has additional extensions (http://www.nop-templates.com).  I found that they had a plugin that could be loaded up so testing that right now.

Thanks again!
13 years ago
madv1457 wrote:
Thanks for the reply! I am using 2.4.  

I did however come across the Nop Templates site that has additional extensions (http://www.nop-templates.com).  I found that they had a plugin that could be loaded up so testing that right now.

Thanks again!


Hi,

You can download the Nop Anywhere Sliders trial plugin and see how we have integrated the coin slider as all our views are open to modifications. Currently we have a 2D(coin slider) and a 3D slider but for nopCommerce 2.5 we have also integrated the Nivo slider, which comes with a lot of options all of them available from the Administration panel.
Also in the new version of the plugin you will have the ability to add different sliders for different categories and again that will be available from the Administration.
http://nop-templates.com/p/4/nop-anywhere-sliders

Hope this helps!
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.