Page 1 of 1
responsive brand banner not centre
Posted: Mon May 18, 2015 11:11 pm
by platypuspuzzles
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
Re: responsive brand banner not centre
Posted: Sat Jul 25, 2015 2:32 am
by nudylady
same problem. please help
Re: responsive brand banner not centre
Posted: Sat Jul 25, 2015 3:07 am
by OpenTeam
Hello,
do you have a link where we can see the bug online?
Best Regards,
OpenTeam
Re: responsive brand banner not centre
Posted: Sat Jul 25, 2015 11:09 am
by nudylady
OpenTeam wrote:Hello,
do you have a link where we can see the bug online?
Best Regards,
OpenTeam
charmpandora.com
I tried Iphone 5 and chrome mobile emulation. all gave look like below
Re: responsive brand banner not centre
Posted: Sat Jul 25, 2015 8:39 pm
by platypuspuzzles
yep, that's the same for me too.
I just had a look on the computer with firefox, and it does the same thing
Re: responsive brand banner not centre
Posted: Sun Jul 26, 2015 3:18 pm
by viethemes
To solve this problem, you can open file catalog\view\theme\default\template\module\carousel.tpl
find
and add code below after that line
Re: responsive brand banner not centre
Posted: Sun Jul 26, 2015 4:46 pm
by nudylady
viethemes wrote:To solve this problem, you can open file catalog\view\theme\default\template\module\carousel.tpl
find
and add code below after that line
I cannot find: items: 1,
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>
Re: responsive brand banner not centre
Posted: Mon Jul 27, 2015 10:07 pm
by viethemes
Sorry. I modified my local file.
You can insert code after
Re: responsive brand banner not centre
Posted: Wed Jul 29, 2015 1:23 am
by nudylady
viethemes wrote:Sorry. I modified my local file.
You can insert code after
this code worked. thank you so much
Re: responsive brand banner not centre
Posted: Tue Oct 20, 2015 8:25 am
by lui-g
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.
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>
Re: responsive brand banner not centre
Posted: Wed Oct 21, 2015 12:40 am
by viethemes
Do you want to display 11 logos in mobile?
Re: responsive brand banner not centre
Posted: Wed Oct 21, 2015 8:26 am
by lui-g
Yes, just one at a time. Currently, its aligned left. I wanted to display them centered and have it animate one or two at a time. Whatever the orientation and width decides it allows.
Re: responsive brand banner not centre
Posted: Wed Oct 21, 2015 10:11 pm
by viethemes
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;
}
Re: responsive brand banner not centre
Posted: Sat Oct 24, 2015 6:12 am
by lui-g
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.
Re: responsive brand banner not centre
Posted: Sat Oct 24, 2015 6:37 pm
by viethemes
Glad to hear that you are happy with my work
