Loading...
 
Skip to main content

Features / Usability

Forum List Topic List

Forums » Features / Usability » How to move carousel to the center of the page?
 
Thread actions
Print this page
  • Print all pages

    • How to move carousel to the center of the page?

    Posted by hman posts: 210

    How can I move the carousel plugin to the center of the page? The plugin doesn't seem to have a center alignment as own parameter, and when I enclose it in center markup, only the image caption (!) gets centered, the container of image and caption stays on the left hand side...

    Is this a feature or a bug? 😉

    Reads: 1023
    Posted by Mike Finko posts: 228 Ukraine

    Put it in a PluginFluidGrid
    I do not like how everything is pushed to the left, or, the only other option is to push everything to the right. Enter 'PluginFluidGrid', it's the next best thing to sliced bread!

    Two things to keep in mind:

    1. the default setting is 'yes' for 'joincolums', which is counter-intuitive, but, you can change this setting.
    2. there are some php errors, while I have not noticed any usability problems, i have reported this bug


    br,
    Mike

    Posted by hman posts: 210
    Mike Finko wrote:

    Put it in a PluginFluidGrid
    I do not like how everything is pushed to the left, or, the only other option is to push everything to the right. Enter 'PluginFluidGrid', it's the next best thing to sliced bread!

    Two things to keep in mind:

    1. the default setting is 'yes' for 'joincolums', which is counter-intuitive, but, you can change this setting.
    2. there are some php errors, while I have not noticed any usability problems, i have reported this bug


    br,
    Mike


    Thanks for the idea, I immediately tried it. It looks like plugin carousel doesn't run inside FluidGrid, when I add beginning and ending declaration of FluidGrid the plugin call for carousel gets displayed like regular text, but the carousel won't start?!


    Posted by Mike Finko posts: 228 Ukraine

    I just tested, and you are correct, a bit rough - had to reload the page to get it to work.

    This is how I set it up:

    Copy to clipboard
    {FLUIDGRID(joincols="n" colsize="4|4|4")}
---
{carousel type="fgalId" fgalId="6" thumbnailType="none" autoPilot="1" displayProgressBar="1" displayThumbnails="1" displayThumbnailNumbers="1" displayThumbnailBackground="1" clickable="0"}
---
{FLUIDGRID}


    Plugin Carousel is a bit old, better to use Plugin Swiper - the only issue I found with it is when applying the '3D Cube' effect (the best one, too!). All the other configurations work good.

    br.,
    Mike

    Posted by hman posts: 210

    Thanks. Now it works (those "---" were missing. Without them it doesn't work).
    Something else, maybe you could help me on that: This now does center the carousel, but centered relative to the entire screen. Actually I wanted it to be centered inside its zone, which is the middle zone (left and right are only modules, in the center zone there is just the menu a position topbar). Regarding slider: I did use that before. There was a reason why I went away from slider and moved to carousel, but I cannot recall at the moment the precise reason. I think it was something with the design. I'll check my records if can find it again. Again, thanks alot.

    Posted by Mike Finko posts: 228 Ukraine

    yes, the three dashes '---' are what separate the columns (up to 12 across, it's based on bootstrap) and three @ signs '@@@' separate the rows.

    I'm having a hard time understanding the placement you need, maybe you could send a screenshot? It sounds like you may have all of this (the Carousel) in a Module.

    Posted by hman posts: 210
    No, it's just a "classical" Tiki 3-container layout. In the left container there is the default menu ("42") and some modules, in the right-hand container some modules, in the center one the main wiki content. And on the start page the is the carousel.
    Posted by Dustin Ghia posts: 11 Ecuador
    hman wrote:
    No, it's just a "classical" Tiki 3-container layout. In the left container there is the default menu ("42") and some modules, in the right-hand container some modules, in the center one the main wiki content. And on the start page the is the carousel.


    Hi Hman!

    I recommend that you use the Swiper plugin inside a Div plugin. The old Carousel Plugin has poor performance when loading images.

    There is an example:

    {DIV(class="row")} {DIV(class="col-md-12 col-sm-12 col-xs-12" style="")} {DIV(class="row" style="text-align: center;")} {DIV(class="col-md-12 col-sm-12 col-xs-12")} {swiper fileIds="55,54,53,52" effect="slide" navigation="y" displayThumbnails="n" slidesPerView="1" loop="y" autoPlay="y" autoHeight="y" slidesPerColumnFill="column" centeredSlides="y" slideToClickedSlide="n" freeMode="n" preloadImages="y" updateOnImagesReady="y"} {DIV} {DIV} {DIV} {DIV}

    Cheers!
    Dustin

    Posted by Mike Finko posts: 228 Ukraine
    hman wrote:
    Actually I wanted it to be centered inside its zone....


    When using the word 'zone' if you are referring to one of the places inside the FluidGrid you set up, and, now you want it centered in that part (e.g. "zone"), then add the standard wiki syntax for centering anything, double colons on each end of the Plugin Carousel, for example:

    Copy to clipboard
    ::this text is centered::

    which would look like this:

    this code is centered


    I'm guessing you know this syntax, but maybe haven't tried it in this configuration.

    I have not tried this with Carousel as I don't use it anymore, but there is a good possibility it will work.

    br,
    Mike

    Posted by hman posts: 210
    Mike Finko wrote:

    I'm guessing you know this syntax, but maybe haven't tried it in this configuration.

    I have not tried this with Carousel as I don't use it anymore, but there is a good possibility it will work.

    br,
    Mike


    As I wrote above, I did try this already. Plugin carousel ignores it, or better, it "halfways" interprets it, resulting in the image caption being centered (inside the caption box), but not the plugin itself and therefore not the image (or the box surrounding image and caption). That remains left-aligned...

    Posted by Mike Finko posts: 228 Ukraine
    ok, than last thing I could think of would be in a PluginDiv (so PluginCarousel in PluginDiv in Plugin FluidGrid). While I have only found it to align-left or align-right, maybe Dustin's code could help. My guess is that items in a Div could be center aligned, but it's not possibly via the GUI (and I don't have html/css skills yet to add a Div like Dustin's).