SMF Content Slider v.1.1

[Irken]

Hmm...that's odd. This mod been dloaded 3k times with no issues like this. Let me try to recreate this

i have bad luck haha if you want i can show u the problem live on my forum

[Tricky-Ricky]

Shame but this seems to have stopped working just loads constant. One of my fave mods please update Mick?

[FrizzleFried]

Is there any SLIDER/CAROUSEL type mod for 2.1?

What are the chances of this one being updated by chance?

[AnnLykke]

Is there any SLIDER/CAROUSEL type mod for 2.1?

What are the chances of this one being updated by chance?

I would love to know that aswell

[AnnLykke]

Ok - I used this code in a top block in TinyPortal - and it seems to work:

Code Select Expand


<style>
.slider-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 300px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
  margin: 0 auto 20px auto;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 300px;
}

.slide {
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.slide a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.slide img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.slide-caption {
  position: absolute;
  bottom: 15px;
  left: 20px;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 1.3em;
  max-width: 90%;
}

/* Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  user-select: none;
}

.slider-arrow.left {
  left: 10px;
}

.slider-arrow.right {
  right: 10px;
}
</style>

<div class="slider-container">
  <div class="slider-arrow left" onclick="moveSlide(-1)">‹</div>
  <div class="slider-arrow right" onclick="moveSlide(1)">›</div>

  <div class="slider-track" id="sliderTrack">
    <div class="slide">
      <a href="INSERTURL1.COM">
        <img src="INSERTIMAGELINK.jpeg" alt="Slide 1">
        <div class="slide-caption">INSERT TEXT</div>
      </a>
    </div>
    <div class="slide">
      <a href="INSERTURL2.COM">
        <img src="INSERTIMAGELINK.jpeg" alt="Slide 2">
        <div class="slide-caption">INSERT TEXT</div>
      </a>
    </div>
    <div class="slide">
      <a href="INSERTURL3.COM">
        <img src="INSERTIMAGELINK.jpeg" alt="Slide 3">
        <div class="slide-caption">INSERT TEXT</div>
      </a>
    </div>
  </div>
</div>

<script>
let currentSlide = 0;
const track = document.getElementById('sliderTrack');
const totalSlides = 3;

function moveSlide(direction) {
  currentSlide += direction;
  if (currentSlide < 0) currentSlide = totalSlides - 1;
  if (currentSlide >= totalSlides) currentSlide = 0;
  track.style.transform = 'translateX(-' + (100 * currentSlide) + '%)';
}
</script>

See it used here:

hxxp:www.entropiaplayer.com/forum/forum [nonactive]