Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Add slider to your site home page
 
saikrishna59
Jr. Member
 
Avatar
Total Posts:  16
Joined:  2013-01-30
 

Add slider to your site fallow bellow steps

Add Slider to your magento commerce:
Step1:
Go to your magento commerce admin panel and click CMS --> pages / and click home page and copy bellow code
<div class=\"flexslider\">
<ul class=\"slides\">
<li data-thumb=\"images/slider/iphone.jpg\"><img src=\"{{skin url=\’images/slider/iphone.jpg\’}}\” alt=\"\" /></li>
<li data-thumb=\"images/slider/mcpro.jpg\"><img src=\"{{skin url=\’images/slider/mcpro.jpg\’}}\” alt=\"\" /></li>
<li data-thumb=\"images/slider/iphone.jpg\"><img src=\"{{skin url=\’images/slider/iphone.jpg\’}}\” alt=\"\" /></li>
<li data-thumb=\"images/slider/mcpro.jpg\"><img src=\"{{skin url=\’images/slider/mcpro.jpg\’}}\” alt=\"\" /></li>
</ul>
</div>
<script type=\"text/javascript\">// <![CDATA[
var my_glider = new Glider(\’slider\’, {duration:0.5, autoGlide: true, frequency: 4, initialSection: \’section1\’});
// ]]></script>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"http://localhost/magento/jquery.flexslider.js\" defer=\"defer\"></script>
<!-- FlexSlider -->
<script type=\"text/javascript\">// <![CDATA[
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$(\’.flexslider\’).flexslider({
animation: \"slide\",
start: function(slider){
$(\’body\’).removeClass(\’loading\’);
}
});
});
// ]]></script>

Step2:
To add the js files and css file copy your skin files and add this bellow codein to your admin panel
CMS  pages / and click home page go to design Custom Layout Update XML
<reference name=\"head\">
<action method=\"addItem\"><type>skin_js</type><name>js/jquery.flexslider-min.js</name></action>
<action method=\"addItem\"><type>skin_css</type><name>css/demo.css</name></action>
<action method=\"addItem\"><type>skin_css</type><name>css/flexslider.css</name></action>
</reference>

Note: the images palced in your skin folder and js/css files copy your skin folder.

 
Magento Community Magento Community
Magento Community
Magento Community
 
tpcweb
Jr. Member
 
Avatar
Total Posts:  10
Joined:  2012-04-09
 

This is Awesome. Can you add links to each image?

 
Magento Community Magento Community
Magento Community
Magento Community
 
fLukee
Jr. Member
 
Total Posts:  4
Joined:  2012-05-07
 

hello,
i am using magento 1.7.0.2 and i am also trying to integrate the flexslider slideshow.
first via the tutorial on the official website, then with your instructions and it still wont work.
it just displays a narrow, horizontal white bar with rounded corners.

in the head i see that the following files are loaded:
flexslider.css
flexslider.js
flexslider-min.js
jquery-1.8.3.js
jquery-1.8.3.min.js

any suggestions?

thank you!

 
Magento Community Magento Community
Magento Community
Magento Community
 
damagedspoon
Jr. Member
 
Total Posts:  1
Joined:  2013-05-19
 

That’s because the images that are being referenced in the above code either do not exist in your files at all or do not exist in the locations specified. You have to a) put the images in your website files and then b) make sure that the links lead to the appropriate location of the images.

Also, you don’t need to reference ALL of the files you show in the head.

“flexslider-min.js” is a minified version of “flexslider.js.” Same stuff, just smaller. The same goes for jQuery-1.8.3-min
.

fLukee - 24 September 2013 05:43 AM

hello,
i am using magento 1.7.0.2 and i am also trying to integrate the flexslider slideshow.
first via the tutorial on the official website, then with your instructions and it still wont work.
it just displays a narrow, horizontal white bar with rounded corners.

in the head i see that the following files are loaded:
flexslider.css
flexslider.js
flexslider-min.js
jquery-1.8.3.js
jquery-1.8.3.min.js

any suggestions?

thank you!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Jase007
Guru
 
Total Posts:  388
Joined:  2013-11-05
 

Hello,

Have a look this thread may help you http://freemagento.blogspot.in/2012/10/how-to-add-slideshow-on-magento-homepage.html

Thanks

iLoveMage

 
Magento Community Magento Community
Magento Community
Magento Community
 
shahsanjay
Jr. Member
 
Total Posts:  1
Joined:  2014-01-05
 
saikrishna59 - 18 February 2013 10:44 AM

Add slider to your site fallow bellow steps

Add Slider to your magento commerce:
Step1:
Go to your magento commerce admin panel and click CMS --> pages / and click home page and copy bellow code
<div class=\"flexslider\">
<ul class=\"slides\">
<li data-thumb=\"images/slider/iphone.jpg\"><img src=\"{{skin url=\’images/slider/iphone.jpg\’}}\” alt=\"\" /></li>
<li data-thumb=\"images/slider/mcpro.jpg\"><img src=\"{{skin url=\’images/slider/mcpro.jpg\’}}\” alt=\"\" /></li>
<li data-thumb=\"images/slider/iphone.jpg\"><img src=\"{{skin url=\’images/slider/iphone.jpg\’}}\” alt=\"\" /></li>
<li data-thumb=\"images/slider/mcpro.jpg\"><img src=\"{{skin url=\’images/slider/mcpro.jpg\’}}\” alt=\"\" /></li>
</ul>
</div>
<script type=\"text/javascript\">// <![CDATA[
var my_glider = new Glider(\’slider\’, {duration:0.5, autoGlide: true, frequency: 4, initialSection: \’section1\’});
// ]]></script>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"http://localhost/magento/jquery.flexslider.js\" defer=\"defer\"></script>
<!-- FlexSlider -->
<script type=\"text/javascript\">// <![CDATA[
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$(\’.flexslider\’).flexslider({
animation: \"slide\",
start: function(slider){
$(\’body\’).removeClass(\’loading\’);
}
});
});
// ]]></script>

Step2:
To add the js files and css file copy your skin files and add this bellow codein to your admin panel
CMS  pages / and click home page go to design Custom Layout Update XML
<reference name=\"head\">
<action method=\"addItem\"><type>skin_js</type><name>js/jquery.flexslider-min.js</name></action>
<action method=\"addItem\"><type>skin_css</type><name>css/demo.css</name></action>
<action method=\"addItem\"><type>skin_css</type><name>css/flexslider.css</name></action>
</reference>

Note: the images palced in your skin folder and js/css files copy your skin folder.

hello js and css file already created ya new created. jjust like min.js and demo.css, flexslider.css file is how to create and write a code in js and css file.

 
Magento Community Magento Community
Magento Community
Magento Community
 
eleditordigital
Jr. Member
 
Total Posts:  1
Joined:  2014-03-27
Madrid
 

This is Awesome. I would like add a slider with links to the products in my store home page eleditordigital. I’m going to try with your code. Thank you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Krish_Inc
Member
 
Total Posts:  42
Joined:  2014-02-03
India
 

Hello,

Here i give you another example of this, may this work for it.

<div align="center">
<
script type="text/javascript"
var 
image1=new Image()
image1.src="{{skin url=images/banner_1.jpg}}"
var image2=new Image()
image2.src="{{skin url=images/banner_2.jpg}}"
var image3=new Image()
image3.src="{{skin url=images/banner_3.jpg}}" 
</script>

<a href="http://##">
<
img src="{{skin url=images/banner_1.jpg}}" border="2" name="slide" width="890" height="277" /></a>
<
script
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step
++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",5000)
}
slideit
()
</script> 
</div>

Krish Inc
http://www.krishinc.com/

 
Magento Community Magento Community
Magento Community
Magento Community
 
sidmishra
Jr. Member
 
Total Posts:  4
Joined:  2014-04-02
 

How to add slideshow on magento homepage

Step 1: Login magento admin panel goto pages under CMS
Click on content and enter below code

<!--Image Slider Start-->
<div id="slide" align="center">
<script type="text/javascript">// <![CDATA[
var image1=new Image()
image1.src="{{skin url=images/media/slideshow/1.jpg}}”
var image2=new Image()
image2.src="{{skin url=images/media/slideshow/2.jpg}}”
var image3=new Image()
image3.src="{{skin url=images/media/slideshow/3.jpg}}”
var image4=new Image()
image4.src="{{skin url=images/media/slideshow/4.jpg}}”
var image5=new Image()
image5.src="{{skin url=images/media/slideshow/5.jpg}}”
// ]]></script>
<a href="http://www.myhomendeco.com/index.php/bed-rooms.html"> <img src="{{skin url=images/1.jpg}}” alt="” name="slide" width="900" height="277" border="2" /></a>
<script type="text/javascript">// <![CDATA[
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function “slideit()” every 2.5 seconds
setTimeout("slideit()",5000)
}
slideit()
// ]]></script>
</div>
<!--Image Slider End-->

Step 2: Go to below folder
skin/frontend/default/Your_theme/images/media/
create a folder(name:slideshow)
put 5 image files(give name 1.jpg,2.jpg,3.jpg,4.jpg,5.jpg)
and reload

meanwhile refresh and flush you magento cache

enjoy it
Thanks & regards

 
Magento Community Magento Community
Magento Community
Magento Community
 
ZbyszekTomek
Sr. Member
 
Total Posts:  121
Joined:  2013-11-28
 

Nice tips. Have a look at free Banner Slider - the most downloaded Magento plugin

Zbych

 
Magento Community Magento Community
Magento Community
Magento Community
 
valdecialves
Jr. Member
 
Total Posts:  1
Joined:  2012-12-11
 

how do I put this flexslider banners in the category?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Jestore
Member
 
Avatar
Total Posts:  31
Joined:  2008-08-24
UK
 

I have made a quick guide on how to incorporate Layerslider5 in to the Magento Front end available here:

http://www.harkmedia.co.uk/magento/incorporating-layerslider5-magento-front-end/

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top