Slider*/*carrousel to display MM datas

Hi everyone,

I got a MM which will contain cultural events. I'm looking for a solution to automatically display the events (3 attributes : one photo, the title and the date) one by one like in an automated photo slider/carrousel.

Thanks for help.

You can use the core slider. Just have to load the JS and CSS resources and build the HTML markup like the core does it with the slider.

Hi Andreas, thanks for your answer

I've embbeded my ce_MM_list between a start and a stop slider with ce_slider_start and ce_slider stop templates selected and activated JS and js_slider in my layout but this doesn't work. How can I make the MM list elements to be displayed one by one in my slider ?

To help you I have to take a look at the page. URL pleaze?

With pleasure ;-) Here it is : http://lestock.net/lnhv3/index.php/i...-dauteurs.html

Id' like the 2 elements under "Liste événements" to slide with or without the help of Précédent (former) and Suivant (next) buttons.

Thanks.

Ok, Contao slider looks like this one (best is to deactivate JS to see HTML before JS manipulates the DOM)

HTML Code:

---

<div class="ce_sliderStart first block">
  <div data-config="5000,300,0,1" class="content-slider">
    <div class="slider-wrapper">
      <div class="ce_text slidebox1 block"></div>
      <div class="ce_text slidebox1 block"></div>
      <div class="ce_text slidebox1 block"></div>
    </div>
  </div>
  <nav class="slider-control">
    <a class="slider-prev" href="#">Previous</a>
    <span class="slider-menu"></span>
    <a class="slider-next" href="#">Next</a>
  </nav>
</div>

---

Your HTML looks like this

HTML Code:

---

<div class="ce_sliderStart first block">
  <h1>galerie</h1>
  <div data-config="1000,300,0,1" class="content-slider">
    <div class="slider-wrapper">
      <div class="ce_metamodel_content block">
        <h1>Liste événements</h1>
        <div class="layout_full">
          <div class="item first even"></div>
          <div class="item last odd"></div>
        </div>
      </div>
    </div>
  </div>
  <nav class="slider-control">
    <a class="slider-prev" href="#">Précédente</a>
    <span class="slider-menu"></span>
    <a class="slider-next" href="#">Suivante</a>
  </nav>
</div>

---

So you see, the sliding container (Contao: div.slidebox1, yours: div.item) has to be direct child of div.slider-wrapper. Try to mod the template that way.

you can see it at http://www.scrum-events.de/

I have mixed "normal" images with MM-Images - you can see the different at the right bottom corner "Nächstes Training"

... I have made a special template for frontend list and set the the mm-list like a picture content element... thats all ;-)