Post by wizardhomefitness. » Mon Apr 16, 2012 11:24 am

Hi Guys,

I am trying to work out how to align images in the carousel module. For example, I would like to center the images and control the spacing between them and also change the order they are shown in. If someone could point to the right files to edit that would be great. I am currently using Opencart 1.5.1.3.

The site I am working on is -
http://www.freshkicks.com.au/NEW

Any help would be much appreciated.

Thanks,

Pat

Gym Equipment Online Store
http://www.wizardhomefitness.com.au
----------------------------------------------------
Fresh Kicks Online Sneaker & Clothing Store
http://www.freshkicks.com.au


New member

Posts

Joined
Tue Aug 03, 2010 2:53 pm

Post by wizardhomefitness. » Tue Apr 17, 2012 12:42 pm

I am still struggling to work out how to get around this.

Any help would be much appreciated.

Thanks,

Pat

Gym Equipment Online Store
http://www.wizardhomefitness.com.au
----------------------------------------------------
Fresh Kicks Online Sneaker & Clothing Store
http://www.freshkicks.com.au


New member

Posts

Joined
Tue Aug 03, 2010 2:53 pm

Post by droconut » Tue Apr 17, 2012 3:54 pm

though i'm not completely sure which carousel module you mean (the actual carousel module is showing the brand logos on your webpage and is, as far as i can tell, aligned to the center) you can hard-code changes into your

catalog/view/theme/default/template/module/carousel.tpl

regarding the sort order; this is no trivial change. you could search trough the extensions (in fact, my commercial module SLIDERS can also do that for you) and see if one of those will fit your needs.

hope this helps,

Dropping Coconut

Droconut SLIDERS v1.23 - customizable image and content slider with caption
Droconut PIECEMAKER v1.00 - customizable PIECEMAKER V2 with caption

for Opencart 1.5.1.3 +


User avatar
New member

Posts

Joined
Wed Mar 07, 2012 4:49 pm


Post by wizardhomefitness. » Tue Apr 17, 2012 8:32 pm

droconut wrote:though i'm not completely sure which carousel module you mean (the actual carousel module is showing the brand logos on your webpage and is, as far as i can tell, aligned to the center) you can hard-code changes into your

catalog/view/theme/default/template/module/carousel.tpl

regarding the sort order; this is no trivial change. you could search trough the extensions (in fact, my commercial module SLIDERS can also do that for you) and see if one of those will fit your needs.

hope this helps,

Dropping Coconut
That's right, I'm referring to the carousel module on the front page which is showing the brands we stock. I have added some code to try and centre this although it is still sitting slightly over to the right for some reason, I'm pretty limited as far as coding goes so I'm not even sure if I have done this right. I attempted to centre the div tags which I assumed are controlling this? I'm sure most people would not even notice this but it is really annoying me.

Thanks for all the help, I really do appreciate it.

Gym Equipment Online Store
http://www.wizardhomefitness.com.au
----------------------------------------------------
Fresh Kicks Online Sneaker & Clothing Store
http://www.freshkicks.com.au


New member

Posts

Joined
Tue Aug 03, 2010 2:53 pm

Post by droconut » Wed Apr 18, 2012 4:17 pm

i just checked your website once more - the div is centered for sure. the problem resides within the brand images not having the same "size". please don't misunderstand this, for the jpgs have all the same width and height stats. that's not the problem!

the brand images don't have the same size - as the brand logos don't have the same proportions and so they visually can't have the "same size".

what you could do to diminish the feeling of having the carousel un-centered:
* you could start by adding another brand logo to your banner so it will eventually move and won't just show 5 images - what atm is the case and thus isn't really of any sense. ... having the carousel module statically show 5 images is no good practice (think about the technology behind the jQuery carousel used ... ).

* you could fiddle around with the images (white-space around the brand logos) and try to get a better optical result. don't do this. that' much work for garbage results ;)

* see my previous post -> sort order -> try and see which order gives you the most "centered" feeling


hope this helps,

Dropping Coconut

Droconut SLIDERS v1.23 - customizable image and content slider with caption
Droconut PIECEMAKER v1.00 - customizable PIECEMAKER V2 with caption

for Opencart 1.5.1.3 +


User avatar
New member

Posts

Joined
Wed Mar 07, 2012 4:49 pm


Post by masterbeta » Tue Dec 15, 2015 12:07 am

code for 2.0.1.0 - in your template/module/carousel.tpl:

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>
just remove the

Code: Select all

class="img-responsive" 
and replace with

Code: Select all

align="middle"
that will center each image inside it's block...

hope that helps

New member

Posts

Joined
Thu Nov 26, 2015 3:55 pm
Location - Ikaria, Greece
Who is online

Users browsing this forum: Baidu [Spider] and 35 guests