add red slideshow

Red slideshow

1. It moves automatically
   
2. three groups
   
3. Four image in each group
   

-----------------------------------

go to Administration Panel > GENERAL > Announcements
General announcements options
as in the picture


Click Add
Name: As you wish
Content * : Add slideshow code

Code:

<style>
.mySlides-konan2000 {display: none;}
 .mySlides-konan2000 img {
      margin-right: 3px;
    height: 145px;
    width: 200px;
box-shadow: 0px 0px 5px 1px #f5005330;
    border: dotted #FCE4EC 1px;
}
@media (max-width: 980px) {
 .mySlides-konan2000 img {
    height: 130px !important;
    width: 22% !important;
}
}
  .mySlides-konan2000 img:hover {
transform: scale(1.1); 
box-shadow: 0px 0px 6px 0px #f44336;
    border: solid #fff 5px;
} 
#slideshow-left, #slideshow-right {
    padding: 7px;
    background: #cb004570;
    position: absolute;
    z-index: 100;
    top: 30%;
    color: #FFF;
    font-size: 30px;
    cursor: pointer;
}
#slideshow-left {
 border-radius: 25px 0px 0px 25px;
  right: 0;
}
#slideshow-right {
    border-radius: 0px 25px 25px 0px;
    left: 0;
}


  .text-konan2000 {
    background: #cb0045;
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    width: auto;
    text-align: center;
}
.slideshow-container {
  border: #cb0045 dotted 1px;
    background: #8b878847;
    overflow: hidden;
    width: fit-content;
    padding: 10px 5px;
    position: relative;
    margin: auto;
}
 
.textt-konan2000 {
    font-size: 22px;
    color: #0c0d0e;
    text-align: center;
}
 

 .mySlides-konan2000 {
    text-align: center;
    padding-top: 7px;
    padding-bottom: 40px;
}
.dot-konan2000 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active-konan2000 {
  background-color: #717171;
}
 
.fadeD {
  animation-name: fadeD;
  animation-duration: 1.5s;
}
@keyframes fadeD {
  from {transform: translate(-1000px, 0px);}
  to {opacity: 1}
}
 
.fadeG {
  animation-name: fadeG;
  animation-duration: 1.5s;
}
@keyframes fadeG {
  from {transform: translate(1000px, 0px);}
  to {opacity: 1}
}

</style>
<div class="slideshow-container">
                                             
 <div class="mySlides-konan2000">
                        <a href="link ">          <img src="https://2img.net/280x/i.servimg.com/u/f20/16/85/77/67/aao_ao13.png" />      </a>      <a href="link">          <img src="https://2img.net/280x/i.servimg.com/u/f20/16/85/77/67/icons-10.png" />      </a>      <a href="link">          <img src="https://2img.net/280x/i.servimg.com/u/f20/16/85/77/67/12222210.jpg" />      </a>      <a href="link">          <img src="https://2img.net/280x/i.servimg.com/u/f11/20/49/63/45/30ee3910.jpg" />      </a>                         
 <div class="textt-konan2000">
                  مجموعة واحد1                     
 </div>
                                           
 </div>
                                             
 <div class="mySlides-konan2000">
                        <a href="link ">          <img src="https://2img.net/r/frmste/images/sigle.png" />      </a>      <a href="link">          <img src="https://2img.net/u/1511/17/19/70/avatars/1-79.jpg" />      </a>      <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223793-72.gif" />      </a>      <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223857-91.png" />      </a>                         
 <div class="textt-konan2000">
                  مجموعة ثنين2                     
 </div>
                                           
 </div>
                                         
 <div class="mySlides-konan2000">
                              <a href="link ">          <img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" />      </a>      <a href="link">          <img src="https://2img.net/u/1511/17/19/70/avatars/1-79.jpg" />      </a>      <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223793-72.gif" />      </a>      <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223857-91.png" />      </a>                         
 <div class="textt-konan2000">
                  مجموعة ثلاثه3                     
 </div>
                                           
 </div>
                                                 
 <div class="text-konan2000">
                  اعلانات المنتدى                   
 </div>
                                       
 <div id="slideshow-left">
                  ❮                   
 </div>
                                         
 <div id="slideshow-right">
                  ❯                   
 </div>
</div><br />
<div style="text-align:center">
                  <span class="dot-konan2000"></span>  <span class="dot-konan2000"></span>  <span class="dot-konan2000"></span>
</div>
 <script>
const slides = document.getElementsByClassName("mySlides-konan2000");
const dots = document.getElementsByClassName("dot-konan2000");
let timeoutID;
let slideIndex = 1;
let hovering = false;

showSlides();

function resetSlide() {
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    slides[i].classList.remove("fadeD", "fadeG");
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active-konan2000");
  }
}

function nextSlide() {
  resetSlide();
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex - 1].classList.add("fadeD");
}

function prevSlide() {
  resetSlide();
  slideIndex--;
  if (slideIndex < 1) {
    slideIndex = slides.length;
  }
  slides[slideIndex - 1].classList.add("fadeG");
}

function showSlides() {
  if (!hovering) {
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].classList.add("active-konan2000");

    timeoutID = setTimeout(() => {
      nextSlide();
      showSlides();
    }, 5000); // Change image every 5 seconds
  }
}

$('.dot-konan2000').click(function () {
  clearInterval(timeoutID);
  slideIndex = $('.dot-konan2000').index(this);
  nextSlide();
  showSlides();
});

$('#slideshow-left').click(function () {
  clearInterval(timeoutID);
  prevSlide();
  showSlides();
});

$('#slideshow-right').click(function () {
  clearInterval(timeoutID);
  nextSlide();
  showSlides();
});

$('.mySlides-konan2000').hover(
  function () {
    hovering = true;
    clearTimeout(timeoutID);
  },
  function () {
    hovering = false;
    showSlides();
  }
);
</script>

Don't forget to press save
---------------

You can also add slideshow code on the home page.
go to Administration Panel > DISPLAY > Generalities > Homepage message ..
Add slideshow code
Don't forget to press save
---------------

replace

Code: link

replace  with a  Link of your choice

replace

Code: Slideshow image

replace  with a image of your choice


Important note

• It is not appropriate to put two slideshows on the same page
  
• It is not appropriate to add slideshow in templates
  

I hope you will love this cute trick ◔◡◔


____________________________
The blue and red slideshow is designed by: كونان2000,
The left and right arrows have been added to the slideshow by: Toryudo

Looks very modern and cool.

Thanks for the codes ^^

كونان2000 wrote:

I like how you get my photo, most probably from romanian support forum or from here

YoshiGM wrote:Looks very modern and cool.
Thanks for the codes ^^

Thanks @YoshiGM ,
I'm glad you like it ! ^^

Mihai wrote:

كونان2000 wrote:

I like how you get my photo, most probably from romanian support forum or from here

Thanks @Mihai ^^,
Yes, your picture was taken from the Romanian support forum
Your photo is beautiful and fit for the red slideshow

كونان2000 wrote:[Thanks @Mihai ^^,
Yes, your picture was taken from the Romanian support forum
Your photo is beautiful and fit for the red slideshow

I can give the others two, i have an yellow one and a green one... it was made by skouliki

Mihai wrote:I can give the others two, i have an yellow one and a green one... it was made by skouliki

skouliki is an expert using Photoshop

  Thank you Mihai ^^
_____________________________

+

My first post has been updated

The Announcements for the AwesomeBB version have been fixed
https://forum.forumactif.com/t408470-probleme-avec-la-version-de-awesomebb-hauteur-de-la-zone-d-annonces

كونان2000 wrote:skouliki is an expert using Photoshop

  Thank you Mihai ^^

cant complain about that ahah, and that also is 100% true... if it was not her, i dunno what i can do withour her

Thanks for the code and the good words

Mihai wrote:cant complain about that ahah, and that also is 100% true... if it was not her, i dunno what i can do withour her

me too like you
I don't know anything about design and photo editing 

skouliki wrote:Thanks for the code and the good words

you deserve the best  

كونان2000 wrote:me too like you
I don't know anything about design and photo editing 

I edit stuff too, but only a background from a picture with Paint 3D

hi
New update for the slide show code
1 The image movement stops while the cursor passes over the images
2 It has become more mobile friendly

Would it be possible to adapt the code so that the four images of the last posts in the forums to choose are automatically added, instead of putting the urls of the images manually in the code?

hi @perlesias

Yes, that's possible, but it might cause some issues,
especially if your forum is active,
and requires placing images in posts regularly to be automatically moved to the slideshow. It's better to handle this manually to ensure accuracy and avoid problems. If you prefer to automate it, it would be advisable to implement it in a separate code rather than directly integrating it into the slideshow.

كونان2000 wrote:hi @perlesias

Yes, that's possible, but it might cause some issues,
especially if your forum is active,
and requires placing images in posts regularly to be automatically moved to the slideshow. It's better to handle this manually to ensure accuracy and avoid problems. If you prefer to automate it, it would be advisable to implement it in a separate code rather than directly integrating it into the slideshow.

That's great, it would be fantastic to be able to make an automatic slider with the images of the latest forum posts (f10, f4) of my forum.

hi @perlesias
I made one suitable for the AwesomeBB version
It automatically places an image with the topic title
But you must put a big picture for each new topic
Also, only the first three topics of the specified section are counted

I sent you a private message

Good work Conan. We are impressed at your accomplishment.

thank you keko_ferkeko

كونان2000 wrote:hi @perlesias
I made one suitable for the AwesomeBB version
It automatically places an image with the topic title
But you must put a big picture for each new topic
Also, only the first three topics of the specified section are counted

I sent you a private message

Thank you very much friend, I will try it to see how it turns out.

@كونان2000 One question, would it be possible to upload more images, instead of three per group, could there be 9?

perlesias wrote: @كونان2000 One question, would it be possible to upload more images, instead of three per group, could there be 9?

hi @perlesias

It's not advisable to upload more than three images per group as it may clutter the slideshow. so it's best to stick with three