Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get image slider to stay anchored to my page

    I am trying to get this image carousel to work on my site and appear in my Home category without having a mind of its own. This code apparently ignores placement however and its incredibly frustrating. Can someone who is better at coding please help me with a fix to get this carousel to stay contained inside the Home section and not float in front of everything in big huge full screen? I'm working in Netsuite. Site address is Home but I don't currently have this code active since it doesn't work right. I want this slider where the one I have currently residing.

    CSS (in theme body)

    Code:
    @charset "UTF-8";
    [data-am-fadeshow] {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #fff;
      /* Slides */
      /* Quick Navigation */
      /* Prev/Next Navigation */
      /* Base functionality */
      /* Autohide Prev/Next Navigation */
    }
    [data-am-fadeshow] .fs-slide {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: opacity 1s ease;
      /* Display first child on load */
    }
    [data-am-fadeshow] .fs-slide:first-child {
      opacity: 1;
    }
    [data-am-fadeshow] .fs-quick-nav {
      position: absolute;
      bottom: 15px;
      left: 50%;
      z-index: 1;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    [data-am-fadeshow] .fs-quick-btn {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin: 0 2px;
      border-radius: 50%;
      cursor: pointer;
      transition: opacity 200ms ease;
      background-color: rgba(255, 255, 255, 0.8);
      /* Set active state to first button on load */
    }
    [data-am-fadeshow] .fs-quick-btn:hover {
      opacity: 0.8;
    }
    [data-am-fadeshow] .fs-quick-btn:first-child {
      background-color: coral;
    }
    [data-am-fadeshow] .fs-prev-btn, [data-am-fadeshow] .fs-next-btn {
      position: absolute;
      display: none;
      top: 0;
      bottom: 0;
      width: 100px;
      cursor: pointer;
      font-family: sans-serif;
      background-color: rgba(255, 255, 255, 0);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      transition: all 200ms ease;
    }
    @media (max-width: 500px) {
      [data-am-fadeshow] .fs-prev-btn, [data-am-fadeshow] .fs-next-btn {
        width: 50%;
      }
    }
    [data-am-fadeshow] .fs-prev-btn:before, [data-am-fadeshow] .fs-next-btn:before {
      position: absolute;
      top: 50%;
      font-size: 3vw;
      color: rgba(255, 255, 255, 0.5);
    }
    [data-am-fadeshow] .fs-prev-btn:hover, [data-am-fadeshow] .fs-next-btn:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    @media (max-width: 500px) {
      [data-am-fadeshow] .fs-prev-btn:hover, [data-am-fadeshow] .fs-next-btn:hover {
        background-color: rgba(255, 255, 255, 0);
      }
    }
    [data-am-fadeshow] .fs-prev-btn {
      left: 0;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    [data-am-fadeshow] .fs-prev-btn:before {
      content: "❮";
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    @media (max-width: 500px) {
      [data-am-fadeshow] .fs-prev-btn:before {
        left: 30px;
      }
    }
    @media (max-width: 500px) {
      [data-am-fadeshow] .fs-prev-btn {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }
    [data-am-fadeshow] .fs-next-btn {
      right: 0;
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    [data-am-fadeshow] .fs-next-btn:before {
      content: "❯";
      right: 50%;
      -webkit-transform: translate(50%, -50%);
      transform: translate(50%, -50%);
    }
    @media (max-width: 500px) {
      [data-am-fadeshow] .fs-next-btn:before {
        right: 30px;
      }
    }
    @media (max-width: 500px) {
      [data-am-fadeshow] .fs-next-btn {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }
    [data-am-fadeshow] input[type="radio"] {
      position: fixed;
      top: -9999px;
    }
    [data-am-fadeshow] input[type="radio"]:checked {
      /* This loop handles the slide switching and quick navigation active state */
      /* Hide navigation if only one slide */
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(5) {
      /* Show slide */
      /* Add active state to dot */
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(5) ~ .fs-slides .fs-slide {
      opacity: 0;
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(5) ~ .fs-slides .fs-slide:nth-child(5) {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(5) ~ .fs-quick-nav .fs-quick-btn {
      background-color: rgba(255, 255, 255, 0.8);
      /* Cancel autoplay */
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(5) ~ .fs-quick-nav .fs-quick-btn:nth-child(5) {
      background-color: coral;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(5) ~ .fs-quick-nav .fs-quick-btn:nth-child(5):hover {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(4) {
      /* Show slide */
      /* Add active state to dot */
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(4) ~ .fs-slides .fs-slide {
      opacity: 0;
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(4) ~ .fs-slides .fs-slide:nth-child(4) {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(4) ~ .fs-quick-nav .fs-quick-btn {
      background-color: rgba(255, 255, 255, 0.8);
      /* Cancel autoplay */
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(4) ~ .fs-quick-nav .fs-quick-btn:nth-child(4) {
      background-color: coral;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(4) ~ .fs-quick-nav .fs-quick-btn:nth-child(4):hover {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(3) {
      /* Show slide */
      /* Add active state to dot */
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(3) ~ .fs-slides .fs-slide {
      opacity: 0;
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(3) ~ .fs-slides .fs-slide:nth-child(3) {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(3) ~ .fs-quick-nav .fs-quick-btn {
      background-color: rgba(255, 255, 255, 0.8);
      /* Cancel autoplay */
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(3) ~ .fs-quick-nav .fs-quick-btn:nth-child(3) {
      background-color: coral;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(3) ~ .fs-quick-nav .fs-quick-btn:nth-child(3):hover {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(2) {
      /* Show slide */
      /* Add active state to dot */
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(2) ~ .fs-slides .fs-slide {
      opacity: 0;
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(2) ~ .fs-slides .fs-slide:nth-child(2) {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(2) ~ .fs-quick-nav .fs-quick-btn {
      background-color: rgba(255, 255, 255, 0.8);
      /* Cancel autoplay */
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(2) ~ .fs-quick-nav .fs-quick-btn:nth-child(2) {
      background-color: coral;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(2) ~ .fs-quick-nav .fs-quick-btn:nth-child(2):hover {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(1) {
      /* Show slide */
      /* Add active state to dot */
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(1) ~ .fs-slides .fs-slide {
      opacity: 0;
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(1) ~ .fs-slides .fs-slide:nth-child(1) {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(1) ~ .fs-quick-nav .fs-quick-btn {
      background-color: rgba(255, 255, 255, 0.8);
      /* Cancel autoplay */
      -webkit-animation: none !important;
      animation: none !important;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(1) ~ .fs-quick-nav .fs-quick-btn:nth-child(1) {
      background-color: coral;
    }
    [data-am-fadeshow] input[type="radio"]:checked:nth-of-type(1) ~ .fs-quick-nav .fs-quick-btn:nth-child(1):hover {
      opacity: 1;
    }
    [data-am-fadeshow] input[type="radio"]:checked:first-of-type:last-of-type ~ .fs-quick-nav,
    [data-am-fadeshow] input[type="radio"]:checked:first-of-type:last-of-type ~ .fs-prev-nav,
    [data-am-fadeshow] input[type="radio"]:checked:first-of-type:last-of-type ~ .fs-next-nav {
      display: none !important;
    }
    [data-am-fadeshow]:hover .fs-prev-btn,
    [data-am-fadeshow]:hover .fs-next-btn {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    
     * ===== PREV/NEXT NAVIGATION =====
    
    [data-am-fadeshow~="next-prev-navigation"] {
      /* Display first pair of Prev/Next Buttons on load */
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(5) {
      /* Show previous button */
      /* Show next button */
      /* Show last prev button if first slide */
      /* Show first next button if last slide */
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(5) ~ .fs-prev-nav .fs-prev-btn {
      display: none;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(5) ~ .fs-prev-nav .fs-prev-btn:nth-child(4) {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(5):first-of-type ~ .fs-prev-nav .fs-prev-btn:last-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(5):last-of-type ~ .fs-next-nav .fs-next-btn:first-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(4) {
      /* Show previous button */
      /* Show next button */
      /* Show last prev button if first slide */
      /* Show first next button if last slide */
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(4) ~ .fs-prev-nav .fs-prev-btn {
      display: none;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(4) ~ .fs-prev-nav .fs-prev-btn:nth-child(3) {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(4) ~ .fs-next-nav .fs-next-btn {
      display: none;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(4) ~ .fs-next-nav .fs-next-btn:nth-child(5) {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(4):first-of-type ~ .fs-prev-nav .fs-prev-btn:last-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(4):last-of-type ~ .fs-next-nav .fs-next-btn:first-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(3) {
      /* Show previous button */
      /* Show next button */
      /* Show last prev button if first slide */
      /* Show first next button if last slide */
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(3) ~ .fs-prev-nav .fs-prev-btn {
      display: none;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(3) ~ .fs-prev-nav .fs-prev-btn:nth-child(2) {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(3) ~ .fs-next-nav .fs-next-btn {
      display: none;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(3) ~ .fs-next-nav .fs-next-btn:nth-child(4) {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(3):first-of-type ~ .fs-prev-nav .fs-prev-btn:last-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(3):last-of-type ~ .fs-next-nav .fs-next-btn:first-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(2) {
      /* Show previous button */
      /* Show next button */
      /* Show last prev button if first slide */
      /* Show first next button if last slide */
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(2) ~ .fs-prev-nav .fs-prev-btn {
      display: none;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(2) ~ .fs-prev-nav .fs-prev-btn:nth-child(1) {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(2) ~ .fs-next-nav .fs-next-btn {
      display: none;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(2) ~ .fs-next-nav .fs-next-btn:nth-child(3) {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(2):first-of-type ~ .fs-prev-nav .fs-prev-btn:last-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(2):last-of-type ~ .fs-next-nav .fs-next-btn:first-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(1) {
      /* Show previous button */
      /* Show next button */
      /* Show last prev button if first slide */
      /* Show first next button if last slide */
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(1) ~ .fs-next-nav .fs-next-btn {
      display: none;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(1) ~ .fs-next-nav .fs-next-btn:nth-child(2) {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(1):first-of-type ~ .fs-prev-nav .fs-prev-btn:last-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] input[type="radio"]:checked:nth-of-type(1):last-of-type ~ .fs-next-nav .fs-next-btn:first-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] .fs-prev-btn:last-child {
      display: block;
    }
    [data-am-fadeshow~="next-prev-navigation"] .fs-next-btn:nth-child(2) {
      display: block;
    }
    
    /* Base Styling */
    body {
      margin: 0;
    }
    
    .container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    Here is the HTML (inside the Home category)

    Code:
    <div class="container">
    
        <div data-am-fadeshow="next-prev-navigation">
    
            <!-- Radio -->
            <input type="radio" name="css-fadeshow" id="slide-1" />
            <input type="radio" name="css-fadeshow" id="slide-2" />
            <input type="radio" name="css-fadeshow" id="slide-3" />
    
            <!-- Slides -->
            <div class="fs-slides">
                <div class="fs-slide" style="background-image: url(https://images.unsplash.com/photo-1460500063983-994d4c27756c?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2550);">
                    <!-- Add content to images (sample) -->
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-family: sans-serif; text-align: center; text-shadow: 0 0 20px rgba(0,0,0,0.5);">
                        <h1 style="margin-top: 0; margin-bottom: 0.8vw; font-size: 5vw; font-weight: bold;"></h1>
                        <p style="font-size: 2vw; font-weight: 100; margin-top: 0;"></p>
                    </div>
                </div>
                <div class="fs-slide" style="background-image: url(https://images.unsplash.com/photo-1440557653082-e8e186733eeb?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);"></div>
                <div class="fs-slide" style="background-image: url(https://images.unsplash.com/photo-1449057528837-7ca097b3520c?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);"></div>
            </div>
    
            <!-- Quick Navigation -->
            <div class="fs-quick-nav">
                <label class="fs-quick-btn" for="slide-1"></label>
                <label class="fs-quick-btn" for="slide-2"></label>
                <label class="fs-quick-btn" for="slide-3"></label>
            </div>
    
            <!-- Prev Navigation -->
            <div class="fs-prev-nav">
                <label class="fs-prev-btn" for="slide-1"></label>
                <label class="fs-prev-btn" for="slide-2"></label>
                <label class="fs-prev-btn" for="slide-3"></label>
            </div>
    
            <!-- Next Navigation -->
            <div class="fs-next-nav">
                <label class="fs-next-btn" for="slide-1"></label>
                <label class="fs-next-btn" for="slide-2"></label>
                <label class="fs-next-btn" for="slide-3"></label>
            </div>
    
        </div>
    
    </div>

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,955
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    Ran your code yesterday. Doesn't work. If you want help before you post check what your putting up to make sure it works.

    Try again, were here to help. A question are you coding this for practice or for real? They're many carousel programs out there that are free to use.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •