This is static text for styling
:)
Once you add elements here, copy them into the content CMS item and link the elements to their relevant CMS fields. Once published, you should see it pulling data from the CMS and this template text will be removed.
I'm just a buttonTaj Mahal
, Agra
Taj Mahal is an Islamic ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra. It was commissioned in 1632 by the Mughal emperor Shah Jahan (r. 1628–1658) to house the tomb of his favourite wife, Mumtaz Mahal;
Explore cityEiffel Tower
, Paris
The symbol of Paris and one of the most photographed structures in the world, a visit to the Eiffel Tower is a must for all travelers. Few landmarks inspire such a passion for travel as this single iron structure.
Explore cityPyramids of Giza
, Egypt
The most famous and largest structure still standing from the Roman Empire, the Colosseum is also the biggest attraction of modern-day Rome. It's been a bucket-list destination of travelers for generations. And it does not disappoint.
Explore cityStatue of Liberty
, New York City
America is full of great sights and places to visit, but it's the Statue of Liberty that represents the United States like no other place. This symbol of freedom in New York City was gifted by the French to the American people in 1896.
Explore cityMachu Picchu
, Peru
If you are planning to see only one attraction in South America, this is the place to come. The ancient Inca city of Machu Picchu is arguably the most impressive ruined city in the world.
Explore cityAcropolis
, Athens
Perched above present day Athens, the Acropolis draws you up and in. Follow in the footsteps of ancients as you walk up the same steps that have been walked on since 438 BC - 2,500 years.
Explore city
How does this slider work?
This slider is custom built and is fully CMS-powered. Please ensure you copy the code in page settings into your project.
You need 2 CMS instances for this to work; 1 for the content [location-cms] and 1 for the images [images-cms]. But both of these are from the same collection ['Locations']
You need 2 CMS instances for this to work; 1 for the content [location-cms] and 1 for the images [images-cms]. But both of these are from the same collection ['Locations']
Step 1: Content setup
Add these 3 attributes as shown.
IMPORTANT NOTE:
The element '.locations-content-wrapper' appears twice:
1. Inside the '.cms-content-template'
This is static and is only used for styling the elements. This static version will be removed on the live site.
2. Inside the '.location-item'
Ensure you copy the static version inside this element and connect all the elements to their relevant CMS fields.
1. Inside the '.cms-content-template'
This is static and is only used for styling the elements. This static version will be removed on the live site.
2. Inside the '.location-item'
Ensure you copy the static version inside this element and connect all the elements to their relevant CMS fields.
Step 2: Images setup
Add 2 attributes and 1 HTML Embed code into the CMS collection for the images.
IMPORTANT NOTE:
1. All static images inside ''.image-stack-wrapper" will be removed and replaced with CMS images.
2. Style the ".image-stack" class to match your design. This is the class that the CMS images use.
Please do not change this class name!
Please do not change this class name!
Step 3: Slider navigation button
Just add 2 buttons, divs or link blocks and give them each an attribute. That's it!
(Optional) Autoplay slide
To enable autoplay on the slider, go to page settings and follow this simple step
IMPORTANT NOTE:
Remove the slider buttons if you are using autoplay to avoid any glitching behaviour.