Slider*/*carrousel to display MM datas

[charled]

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.

[Andreas]

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.

[charled]

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 ?

[Andreas]

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

[charled]

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.

[Andreas]

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

<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

<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.

[zonky]

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 ;-)