How to control slideshow in EXBOUND

• 

  mescisorg · Member · Apr 2, 2017 at 5:02 pm

  • Copy link
  • Add topic to favorites

  in the webpage https://mesc-is2017.org/venue-2/, I have slideshow with unacceptably high top and bottom margin. I have been trying to reduce these without success. Can any body help with this?

  Also the clicker underneath occpies much space which if possible I would like to remove

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 3, 2017 at 10:31 am

  • Copy link

  Hi there,
  There’s so much space added on the top and bottom of the slider because, the class of the slider .slideshow-window is given a large amount of padding at the top and much more padding at the bottom. Like this:

  .slideshow-window {
      background-color: #222;
      border: 20px solid #222;
      border-radius: 10px;
      height: 300px;
      width: 100%;
      margin-bottom: 20px;
      overflow: hidden;
      padding-top: 30px !important;
      padding-bottom: 56.25% !important;
      position: relative;
      z-index: 1;
  }

  So to remove them, modify the above CSS code to remove the top padding and reduce the bottom padding, like this:

  .slideshow-window {
      background-color: #222;
      border: 20px solid #222;
      border-radius: 10px;
      height: 0;
      margin-bottom: 20px;
      overflow: hidden;
      padding-top: 0px !important; // top padding removed
      padding-bottom: 35% !important; // reduced padding
      position: relative;
      z-index: 1;
  }

  Or you can just remove both the paddings and give the slider container a fixed height like this:

  .slideshow-window {
      background-color: #222;
      border: 20px solid #222;
      border-radius: 10px;
      height: 300px; // fixed height of 300px
      margin-bottom: 20px;
      overflow: hidden;
      position: relative;
      z-index: 1;
  }

  Now, to hide the controls at the bottom, just add display: none to the .slideshow-controls class like this:

  .slideshow-controls {
    display: none;
  }

  Hope this helps :)