My Testimonial Slider seems stuck in its current position and won't budge to the left

As an aspiring web designer, I took a template from CodePen and crafted a testimonial slider for my website. To seamlessly merge it with the background, I've been trying to shift the entire testimonial to the left.

Despite attempting the float-left property, no desired movement occurred. Additionally, using the margin-left property resulted in the background shrinking rather than shifting the slider. If anyone has suggestions on how to separate the background and move the slider to the left, please share your insight. I've spent days grappling with this issue, and this particular testimonial template resonated with me. Below is the code snippet:

<div class="slider">
    <input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav"/>
    <input type="radio" name="slider" title="slide2" class="slider__nav"/>
    <input type="radio" name="slider" title="slide3" class="slider__nav"/>
    <input type="radio" name="slider" title="slide4" class="slider__nav"/>
    <div class="slider__inner">

      <div class="slider__contents"><img src="https://i.pinimg.com/736x/90/37/01/903701985912184ea21c2f9afddabae3.jpg" class="testi">
        <br>
        
        <h4 class="slider__caption">        <i class="slider__image fa fa-quote-left"></i>   ethelpaw is exactly what I've been looking for! I am so grateful for the team to help me bring home my amazing kitty Luna.</h4>
        <p class="slider__txt">Alyssa Maguire</p>
      </div>

      <div class="slider__contents"><img src="imgs/do-your-cats-know-any-human-words-mine-can-clearly-say-v0-khv0fzmo760a1.webp" class="testi">
        <br>
        
        <h4 class="slider__caption">        <i class="slider__image fa fa-quote-left"></i>   ethelpaw exceeded our expectations! They matched us with an amazing cat that fits our lifestyle perfectly. Their attention to detail and genuine care for the animals are truly commendable. Thank you for bringing so much joy into our home!</h4>
        <p class="slider__txt">Mark T.</p>
      </div>

      <div class="slider__contents"><img src="imgs/WhatsApp Image 2023-05-15 at 5.40.33 PM.jpeg" class="testi">
        <br>
        
        <h4 class="slider__caption">        <i class="slider__image fa fa-quote-left"></i>   The staff's compassion and knowledge made the adoption process a breeze. My kitten, Ginger brings endless happiness into my life. ethelpaw is a blessing!</h4>
        <p class="slider__txt">Sarah Johnson</p>
      </div>

      <div class="slider__contents"><img src="https://i.guim.co.uk/img/media/d8562814c131092f47d25eecd352a80df8bdd22a/0_404_7360_4417/master/7360.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=957f7591586da5045ffd305c7b09cced" class="testi">
        <br>
        
        <h4 class="slider__caption">        <i class="slider__image fa fa-quote-left"></i>   I adopted my playful and loving puppies, Tiger and Leah and the support I received from the team was exceptional. From the first visit to bringing my new buddies home, the experience was outstanding.</h4>
        <p class="slider__txt">Noah Collins</p>
>       </div>
      
    </div>
  </div>
  </div>
  </div>

See below for the CSS styling:

  .slider {
    height: 100%;
    position: relative;

    appearance: none;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
  


    display: flex;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }


  .slider__nav {
    width: 12px;
    height: 12px;
    margin: 2rem 12px;
    border-radius: 50%;
    z-index: 10;
    outline: 6px solid #ccc;
    outline-offset: -6px;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .slider__nav:checked {
    -webkit-animation: check 0.4s linear forwards;
            animation: check 0.4s linear forwards;
  }
  .slider__nav:checked:nth-of-type(1) ~ .slider__inner {
    left: 0%;
  }
  .slider__nav:checked:nth-of-type(2) ~ .slider__inner {
    left: -100%;
  }
  .slider__nav:checked:nth-of-type(3) ~ .slider__inner {
    left: -200%;
  }
  .slider__nav:checked:nth-of-type(4) ~ .slider__inner {
    left: -300%;
  }
  .slider__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 100%;
    -webkit-transition: left 0.4s;
    transition: left 0.4s;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
       
  }
  .slider__contents {
    height: 100%;
    padding: 2rem;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .slider__image {
    font-size: 2.7rem;
    color: #85c4ba;
        
  }
  .slider__caption {
    font-weight: 500;
    max-width: 500px;
    margin: 2rem 0 1rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }
  .slider__txt {
    color: #999;
    margin-bottom: 1rem;
    max-width: 300px;
    font-size: 20px;

  }
  
  @-webkit-keyframes check {
    50% {
      outline-color: #333;
      box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
    }
    100% {
      outline-color: #333;
      box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    }
  }
  
  @keyframes check {
    50% {
      outline-color: #333;
      box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
    }
    100% {
      outline-color: #333;
      box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    }
  }

  .testi{
    width:250px;
    height:250px;
    object-fit:cover;
    border-radius:50%;

  }

Your assistance would be greatly appreciated.

htmlcssslider

Answer №1

To customize the width of the slider, simply define it in the .slider class as the default setting is 100%. If you wish to include elements next to the slider, consider creating a wrapper using flexbox or grid.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to modify the jquery script to display on page load rather than on scrolling action

Currently in the process of working on my site, www.runebs.dk. Utilizing a script to activate information for each project. JS.. $('.showHide').on('click',function(){ $(this).toggleClass('active'); $( '#subHead ...

jquerycss

Affix Object to Bottom of Stationary Element

I have a header element that I want to remain fixed while scrolling. The scrollable area should be positioned directly after the fixed header, without using position: absolute and removing it from the document flow. To better illustrate the issue, I' ...

htmlcssflexbox

Sending various values to a JavaScript function

I am working with a function that looks like this: //Function Call with Single Parameter responses(baseURL); //Function Definition function responses(baseURL) { $.ajax({ url: baseURL, type: "get", cache: false, header ...

javascripthtmlarraysajax

Whiskey Angostura and Straight Row Set to 8, not 12

Recently, I incorporated Bourbon, Bitters, and Neat into my rails application. However, I am encountering an issue where the number of grid-columns is stuck at 8 instead of the desired 12. To address this problem, I have taken the following steps: Ensur ...

htmlcssruby-on-railssass

Styling in sass gets even more powerful when using custom selectors that are

Using these mixins makes it easy to work with BEM syntax in sass 3.3.2: =b($name) .#{$name} @content =e($name) &__#{$name} @content =m($name) &--#{$name} @content +b(menu) +e(item) color: grey +e(item) +m(alert) ...

csssassbem

What value is used as the default for justify content?

MDN states that the default value of justify-content is normal, even though it's not listed in the accepted values. What exactly does a normal value mean? normal This means that items are packed in their default position as if no justify-cont ...

htmlcssflexboxcss-grid

Looking for assistance in creating a stunning portfolio showcase?

As I work on building my portfolio webpage, I've realized that with my limited knowledge of HTML/CSS, creating a great gallery might be challenging. In search of an efficient solution, I ventured across the web but couldn't find anything that ful ...

htmlcss

Text reveal animation in Framer Motion is not functioning as expected

I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...

cssreactjsnext.jsgsapframer-motion

Challenges with dynamically adding rows using jQuery

I am trying to create a dynamic form that allows users to select a project and then populates tasks based on the selected project from a database query. The user can then enter hours for each task, which are updated based on the project id and task id comb ...

phpjavascriptjqueryhtmlmysql

"Eliminating the visual feedback frame from your Samsung Galaxy browser: A step-by-step

After clicking a link, a dark orange frame is displayed around it. This frame can sometimes persist until the next scroll or screen touch. Similarly, when other elements are clicked, an orange frame may appear, adjusting in size to reflect the element cli ...

androidhtmlcssbrowsersamsung-mobile

Clicking on various buttons will trigger the opening of different tabs within a single modal window

Imagine I have two distinct buttons, A and B. Within a single modal window, there exist two tabs labeled as a and b. My goal is to be able to click on A and have tab a displayed in the modal, while clicking on B should reveal tab b within that same modal. ...

htmlbootstrap-modal

SoundCloud and Vimeo have the capability to link their players across separate tabs, and even between tabs and embedded players

I find it intriguing how SoundCloud and Vimeo are synchronized with their tabs, so that when you play something in one tab, the others pause. It's worth noting that this feature only works on SoundCloud when two instances of the website are open, wher ...

javascripthtmlaudiovideosoundcloud

Creating a Dynamic Slideshow on Autopilot

My JavaScript skills are not perfect and I'm feeling a bit lost. I have this code for a slideshow, but I want to make it automatic while also allowing users to navigate between images freely. I'm struggling to figure out how to implement this fun ...

javascripthtmlcss

Is there a way to keep the text animation going even when I'm not hovering over it with the cursor?

Is there a way to make text continue animating on the page even when the cursor is not placed on it? I understand the hover function, but how can I ensure the text keeps animating without interruption? $(document).ready(function () { $("#start&q ...

javascripthtmljquerycss

Trigger a function when the browser automatically populates an input field

I am attempting to trigger a function that can detect if the browser has autofilled a field and then add a specific class to it. After finding a thread with a solution that mostly works, mentioned here: Here is how I implemented it: $.fn.allchange = fun ...

javascriptjqueryhtmlautocompletecallback

Input field that adjusts its width based on screen size, accompanied by two buttons displayed side

I need a solution to display a text input and two buttons side by side. The buttons should take up only the space they require, while the text input should expand to fill the remaining space. It's important to have small margins between these elements ...

cssbootstrap-4

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...

javascriptjqueryhtmlcss

Customizing the appearance of the file input type using an image in HTML and CSS

Can you provide guidance on utilizing the image below? Is there an alternative approach to using: <input type="file" /> ...

htmlcssimageuploadstyling

Choose the element that is trapped within the div

I've hit a roadblock with this issue that I just can't seem to figure out. I was working on a practice project creating a Netflix-like webpage, and the select element in the footer containing languages is stuck and won't budge. Here's m ...

htmlcss

Is it possible for you to pinpoint the mistake in the code below?

I've been trying to locate an error in the function but have been unable to do so. As a beginner in this area, I would appreciate your patience. <html> <head><title>print names</title> <script langua ...

javascripthtml