I have opencart 2.020 installed and have just replaced the manufactures banner slider images with png files of brands for my business. On the website it looks great, just like the demo.
On the mobile (iphone 4) the images are sitting to the left when scrolling through the banner slider, instead of center to the scroll arrows.
Not sure if this is a bug or can be corrected in admin somewhere
yep, that's the same for me too.
I just had a look on the computer with firefox, and it does the same thing
I just had a look on the computer with firefox, and it does the same thing
To solve this problem, you can open file catalog\view\theme\default\template\module\carousel.tpl
find
and add code below after that line
find
Code: Select all
items: 1,Code: Select all
center:true,http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
I cannot find: items: 1,viethemes wrote:To solve this problem, you can open file catalog\view\theme\default\template\module\carousel.tpl
findand add code below after that lineCode: Select all
items: 1,Code: Select all
center:true,
this my carousel.tpl content:
Code: Select all
<div id="carousel<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item text-center">
<?php if ($banner['link']) { ?>
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
<script type="text/javascript"><!--
$('#carousel<?php echo $module; ?>').owlCarousel({
items: 6,
autoPlay: 3000,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
});
--></script>Sorry. I modified my local file.
You can insert code after
You can insert code after
Code: Select all
items: 6,http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
this code worked. thank you so muchviethemes wrote:Sorry. I modified my local file.
You can insert code afterCode: Select all
items: 6,
This is not working for me to center the images. I have 11 but only one displace on mobile.
this is the code... Please help.
this is the code... Please help.
Code: Select all
<div id="carousel<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item text-center">
<?php if ($banner['link']) { ?>
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
<script type="text/javascript"><!--
$('#carousel<?php echo $module; ?>').owlCarousel({
items: 6,
center: true,
autoPlay: 3000,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
});
--></script>Do you want to display 11 logos in mobile?
http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
To fix this problem, you can install my free extension Custom CSS and add code below
Code: Select all
.owl-wrapper .img-responsive {
display: inline-block;
}http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
Your help here is much appreciated. You've already helped me from reading all your other tips and tricks in regards to other post. Your extensions are time saving and generous. As soon as I financially able I will show my appreciation and purchase one. Home my site becomes lucrative.
The code worked perfect.
The code worked perfect.
Glad to hear that you are happy with my work 
http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension
Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme
Extra Positions PRO, Custom JavaScript, Custom CSS and others
Who is online
Users browsing this forum: No registered users and 402 guests
