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:  9
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
 
FMEExtensions
Mentor
 
Avatar
Total Posts:  1147
Joined:  2009-08-07
 

Here is a free banners module that can help you;

FME Free Banners Magento Extension

 
Magento Community Magento Community
Magento Community
Magento Community
 
Krish_Inc
Member
 
Total Posts:  33
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:  78
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
 
Brainvire
Sr. Member
 
Avatar
Total Posts:  92
Joined:  2012-12-26
Mumbai
 

This is an incredible, but It’s not easy to write a code for a non-technical Person. So Many Ecommerce Store owner instead using this Code they simply go for either FREE or PAID magent extensions. It’s very easy to setup and install Few Clicks and your Banner Slider is Ready. You can also Find Banner Slider Magento Extension at EcomExtension Store.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Ocodewire01
Sr. Member
 
Total Posts:  122
Joined:  2013-12-30
India
 

Use banner slideshow extension to add banners of your products on homepage as a slider so that customers can easily view your products in a slideshow. It is the best way to enhance your business productivity & sales.

http://magento.ocodewire.com/advanced-banner-slider.html

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