Loading Profile...
Javascript featured collection slider...
Looking for an easy way to use javascript for a featured content slider. I've tried different variations of coda slider, but can't seem to get them to work on using the vision web server. Do I need to upload it live, or am I doing something wrong?
I’m a little frustrated
1
person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
Create a customer community for your own organization
Plans starting at $19/month
-
Inappropriate?Sweet, solved my own problem!
I followed this tutorial on the jQuery plugin for nav slider:
http://cssglobe.com/post/5780/easy-sl...
Add these .js libraries inside your theme.liquid <head>:
<head>
{{ 'jquery.js' | asset_url | script_tag }}
{{ 'easySlider1.7.js' | asset_url | script_tag }}
</head>
Then add this you your index.liquid:
{{ 'featured.jpg' | asset_url | img_tag }}
{{ 'featured2.jpg' | asset_url | img_tag }}
{{ 'featured3.jpg' | asset_url | img_tag }}
Then add this css to your shop.css or main .css file:
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:674px;
}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
#container{
margin:0 auto;
position:relative;
text-align:left;
width:650px;
background:#fff;
margin-bottom:2em;
}
#header{
height:80px;
line-height:80px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
margin-top: 15px;
margin-left: 20px;
}
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:650px;
height:200px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:650px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(btn_next.gif) no-repeat 0 0;
}
/* // Easy Slider */
I followed this tutorial on the jQuery plugin for nav slider:
http://cssglobe.com/post/5780/easy-sl...
</head>
I’m ecstatic
