Sizing in Carousel + Side-by-Side Images

Krothos
Krothos

1) How do I adjust the images in the Carousel? My pics have a normal height of 300 px and they are appearing too large on my website, making the text underneath disappear below the monitor viewing area (have to scroll down to read it). I have tried adding the code to max the height at 100 px and tried loading my re-saved pics at 100 px. Doesn't matter. The Carousel shows the images almost at full screen height (monitor is 1920x1200, using Firefox).

2) I was hoping to setup an image and a carousel side-by-side to each other. Is that possible? Or must the carousel be on my own "line", with text and other images below it?

Thanks!

 

Comments

  • Krothos
    Krothos
    Posts: 230

    I'm still having the issue #1. How do I adjust the images in the Carousel, to prevent them from resizing when the browser window is resized? Thanks.

     

  • ragnarhawk
    Posts: 168

    I put it in a <div> to control the size.



    <div style="max-width:200px; margin:auto; ">

    [slideshow]

    [slideshow-content] [[File:919333  | class=media-item-align-none | WOODEN-GNOME-_scaled.jpg]] [end-slideshow-content]

    [slideshow-content] [[File:919334  | class=media-item-align-none | wooden-doll-right.jpg]] [end-slideshow-content]

    [slideshow-content] [[File:919332  | class=media-item-align-none | wooden_dwarf_-scaled.jpg]] [end-slideshow-content]

    [slideshow-content] [[File:919335  | class=media-item-align-none | wooden-doll.jpg]] [end-slideshow-content]

    [slideshow-options] false | 1 | 1 | 2000 | true | true | 500 | true [end-slideshow-options]

    [end-slideshow]

    </div>

  • Krothos
    Krothos
    Posts: 230

    That is exactly what I was looking for. It looks much better now.

     

     

  • Bortas
    Bortas
    Posts: 645

    Speaking of carousels... does anyone have a code snippet that removes the top boarder on the next/previous buttons, as well as the dot indicators? You don't notice them on a plain background, but they are pretty glaring on a non-white background.

    -bort

  • Krothos
    Krothos
    Posts: 230

    The dot indicators can be removed by unselecting the "Dots" checkbox or using FALSE in the first option field of the CSS.

    Not sure about how to remove the top boarder, but I want to add to be able to remove the next/previous arrows. When I created this carousel to be next (i.e. side-by-side) to another image, the arrows were shown over the other image.

     

  • Bortas
    Bortas
    Posts: 645

    I'm sorry, I mispoke. I want the dot indicators. I don't want the top border on each dot, and the top border on the prev/next arrows.

    As for making them not disappear, I'd imagine its somewhere along the below, but I couldn't quite get them to work. Perhaps a wiser CSS guru can see whats missing.

    -bort


    .slick-arrow {display: none;}
    .slick-prev {display: none;}
    .slick-next {display: none;}

     

  • Abersade
    Abersade
    Posts: 417

    Bortas,

    Here you go. This took a lot longer to figure out than it should have.


    button, .button {box-shadow: none;}

     

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Bortas
    Bortas
    Posts: 645

    Abersade- Thank you! Something quite simple, but I just couldn't seem to nail it down. Thanks for finding that!

    -bort

  • Keryth987
    Keryth987
    Posts: 1,047

    Will that code make the arrows dissapear?

  • Abersade
    Abersade
    Posts: 417

    I hate to recommend it but adding the !important tag to Bort's previous and next code above makes it work, and given that the site itself is adding the css to display it at the element level I don't see an easy alternative.

     

    Ergo, to make the arrows vanish:


    .slick-prev {display: none !important;}
    .slick-next {display: none !important;}

     

    To make the dots vanish:


    .slick-dots {display: none !important;}

     

    Hopefully it should be obvious that one shouldn't use both of those code snippets, as doing so renders your carousel into just a static picture unless there's a setting or something to make it shift pictures automatically.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Keryth987
    Keryth987
    Posts: 1,047

    Works great. thanks Abersade

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions