How do I set interval beetwen slides in a custum template

[Helmut Lubik]

Hi,

how do i set the individual interval in a custom template?

My Template look like:

var items = [
  {
      ID: 1,
      Title: '.',
      ImgPath: '/resources/images/slider/foryou.jpg',
      Color: 'transparent',
      Interval: 1000,
  }, ...

and my Control:

  var carouselObj = new ej.navigations.Carousel({

    animationEffect: 'Custom',

    cssClass: 'parallax',

    dataSource: items,

    itemTemplate: '#productTemplate',

    buttonsVisibility: 'VisibleOnHover',

    showIndicators: false,

  });

  carouselObj.appendTo("#carousel");

[Vinitha Devi Murugan]

Hi Helmut,

Sample: https://stackblitz.com/edit/vpcad1?file=index.js,index.html

Interval api: https://ej2.syncfusion.com/javascript/documentation/api/carousel/#interval

You can achieve your requirement by setting the interval as shown in the highlighted code snippet below.

[index.js]

var carouselItems = [

    {

        ID: 1,

        Title: 'cardinal',

        Content: 'Birds are a group of warm-blooded vertebrates constituting the class Aves, characterized by feathers, toothless beaked jaws, the laying of hard-shelled eggs, a high metabolic rate, a four-chambered heart, and a strong yet lightweight skeleton. Birds live worldwide and range in size from the 5.5 cm (2.2 in) bee hummingbird to the 2.8 m (9 ft 2 in) ostrich. There are about ten thousand living species, more than half of which are passerine, or "perching" birds.',

        ImgPath: 'https://ej2.syncfusion.com/products/images/carousel/cardinal.png',

        interval: 3000,

    }, {

        ID: 2,

        Title: 'kingfisher',

        Content: 'Nature, in the broadest sense, is the natural, physical, material world or universe. "Nature" can refer to the phenomena of the physical world, and also to life in general. The study of nature is a large, if not the only, part of science. Although humans are part of nature, human activity is often understood as a separate category from other natural phenomena.',

        ImgPath: 'https://ej2.syncfusion.com/products/images/carousel/hunei.png',

        interval: 1000,

 

    }, {

        ID: 3,

        Title: 'keel-billed-toucan',

        Content: 'The Twin Towers Correctional Facility, also referred to in the media as Twin Towers Jail, is a complex in Los Angeles, California.[1] The facility is located at 450 Bauchet Street, in Los Angeles, California and is operated by the Los Angeles County Sheriffs Department. The facility consists of two towers, a medical services building, and the Los Angeles County Medical Center Jail Ward.',

        ImgPath: 'https://ej2.syncfusion.com/products/images/carousel/costa-rica.png',

        interval: 1000,

 

    }, {

        ID: 4,

        Title: 'yellow-warbler',

        Content: 'The sea, connected as the world ocean or simply the ocean, is the body of salty water that covers approximately 71 percent of the Earth surface. The word sea is also used to denote second-order sections of the sea, such as the Mediterranean Sea, as well as certain large, entirely landlocked, saltwater lakes, such as the Caspian Sea.',

        ImgPath: 'https://ej2.syncfusion.com/products/images/carousel/kaohsiung.png',

        interval: 1000,

 

    }, {

        ID: 5,

        Title: 'bee-eater',

        Content: 'Snow comprises individual ice crystals that grow while suspended in the atmosphere—usually within clouds—and then fall, accumulating on the ground where they undergo further changes.[2] It consists of frozen crystalline water throughout its life cycle, starting when, under suitable conditions, the ice crystals form in the atmosphere, increase to millimeter size, precipitate and accumulate on surfaces, then metamorphose in place, and ultimately melt, slide or sublimate away.',

        ImgPath: 'https://ej2.syncfusion.com/products/images/carousel/bee-eater.png',

        interval: 1000,

 

    }

];

var carouselObj = new ej.navigations.Carousel({

    dataSource: carouselItems,

    itemTemplate: '#itemTemplate',

    showIndicators: true,

    cssClass: 'parallax',

    animationEffect: 'Custom',

    buttonsVisibility: 'VisibleOnHover'

});

carouselObj.appendTo("#carousel");

 [index.html]

<script type="text/x-template" id="itemTemplate">

  <div class="card">

      <img src="${ImgPath}" class="card-img-top" alt="logo" style="height:100%;width:100%;" />

      <div class="card-body">

          <h5 class="card-title">${Title}</h5>

          <p class="card-text">${Content}</p>

      </div>

  </div>

</script>

Regards,

Vijay Ravi

[Helmut Lubik]

Hi,

I tried this yesterday too, but it's not working. Even your sample remain the default interval of 5000 ms.

Thanks and regards

Helmut

[Vijay Ravi]

Hi Helmut,

Sample: https://stackblitz.com/edit/vpcad1-ipxrsy?file=index.js,index.html

API: https://ej2.syncfusion.com/documentation/api/carousel/#interval

UG: https://ej2.syncfusion.com/documentation/carousel/animations-and-transitions/#intervals-between-slides

You can set individual intervals for each slide in a custom template using the interval API in the Syncfusion Carousel, you can add an interval property to each item in your carousel Items array. Refer the below highlighted code snippet. Let us know if you need any further assistance.

[index.js]

var carouselItems = [

    {

        ID: 1,

        Title: 'cardinal',

        Content: 'Birds are a group of warm-blooded vertebrates constituting the class Aves, characterized by feathers, toothless beaked jaws, the laying of hard-shelled eggs, a high metabolic rate, a four-chambered heart, and a strong yet lightweight skeleton. Birds live worldwide and range in size from the 5.5 cm (2.2 in) bee hummingbird to the 2.8 m (9 ft 2 in) ostrich. There are about ten thousand living species, more than half of which are passerine, or "perching" birds.',

        ImgPath: 'https://ej2.syncfusion.com/products/images/carousel/cardinal.png',

        interval: 1000

    },…

];

var carouselObj = new ej.navigations.Carousel({

    dataSource: carouselItems,

    itemTemplate: '#itemTemplate',

    showIndicators: true,

    cssClass: 'parallax',

    animationEffect: 'Custom',

    buttonsVisibility: 'VisibleOnHover'

});

carouselObj.dataSource.forEach(function (item) {

    carouselObj.setProperties({ 'interval': item.interval });

});

carouselObj.appendTo("#carousel");

 

Regards,

Vijay Ravi