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.