Animate .css Slider
Create a beautiful responsive carousel slider.
Animate.css library
Examples 2
We’ll be happy to show you!
Example #2.1
Initialization:
$('#galery26').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 7500,
constSliderHeight: true,
})
Example #2.2
Initialization:
$('#galery27').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 7500,
animationType: 'fadeOutInDown/fadeOutInUp',
animationTime: 'animate__slower',
constSliderHeight: true,
})
Marketing Communication
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nesciunt provident fugiat obcaecati at. Molestiae hic impedit, nobis debitis animi dolore nulla veniam excepturi voluptate amet placeat autem mollitia corrupti.
Cora Johnson
Free
Summer Kids
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit debitis assumenda dolorum ducimus dolorem saepe, tempore, eligendi quam illum officiis deleniti ullam, expedita officia corrupti quia nihil ea tempora laudantium.
Andrea Piacquadio
USD 45
Business & Management
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident doloribus libero iure nobis quaerat sapiente vitae fugiat dolore labore quis iusto officiis sed vel repellat, possimus dolorem voluptatibus nisi eos.Provident doloribus libero iure nobis quaerat.
Mark Willson
Free
Example #2.3
Initialization:
$('#galery28').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 4000,
animationType: 'fadeOutInDownBig/fadeOutInUpBig',
animationTime: 'animate__fast',
constSliderHeight: true,
})
Graphic & Web Design
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate harum tenetur commodisquam praesentium cupiditate consequatur odio molestiae? Animi natus dolorem qui laboriosam quia!
Ali Pazani
USD 80
Art of Business Negotiations
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sit molestiae tenetur ullam expedita maxime iusto eveniet. Labore hic, delectus inventore!
Mark Willson
USD 50
Social Media Management
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias adipisci perferendis officiis recusandae dolor ipsam dolorum dolores. Qui eos eaque consectetur molestiae, doloribus aspernatur nam excepturi ea atque beatae iste? Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias adipisci perferendis officiis recusandae dolor ipsam dolorum dolores.
Ali Pazani
USD 25
Example #2.4
Initialization:
$('#galery29').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 4000,
animationType: 'fadeOutInLeft/fadeOutInRight',
animationTime: 'animate__faster',
constSliderHeight: true,
})
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example #2.5
Initialization:
$('#galery30').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 4500,
animationType: 'fadeOutInLeftBig/fadeOutInRightBig',
animationTime: 'animate__faster',
hoverAnimation: true,
hoverAnimationType: 'pulse',
constSliderHeight: true,
})
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example #2.6
Initialization:
$('#galery31').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 5500,
animationType: 'fadeOutInLeftTop/fadeOutInRightBottom',
animationTime: 'animate__slow',
constSliderHeight: true,
})
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example #2.7
Initialization:
$('#galery32').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 4000,
animationType: 'fadeOutInLeftBottom/fadeOutInRightTop',
constSliderHeight: true,
})
Professional trainers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae omnis nesciunt delectus maiores odit minus at recusandae esse ut dolore ipsam, quis voluptatum, quam nobis repellat! Cupiditate ab alias aspernatur.
International Certification
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae omnis nesciunt delectus maiores odit minus at recusandae esse ut dolore ipsam, quis voluptatum, quam nobis repellat! Cupiditate ab alias aspernatur.
Free for 3 months
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae omnis nesciunt delectus maiores odit minus at recusandae esse ut dolore ipsam, quis voluptatum, quam nobis repellat! Cupiditate ab alias aspernatur.
Example #2.8
Initialization:
$('#galery33').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 4500,
animationType: 'backOutInDown/backOutInUp',
constSliderHeight: true,
})
Alessia Dudley
Real Estate Agent
The teachers are experts in their subjects and their excitement about the material creates challenging and engaging classes for the students. But make no mistake, these are difficult classes!
Issac Wade
Bus Driver
It's been a wonderful experience, everything I wanted for my kids' education and the focus on their individual strengths make me so happy to see them grow and develop as I would want for them. Big difference from our public school experiences.
Adrienne Garza
Recreational Therapist
Incredible teachers that are invested in the students intellectual development. CORE curriculum is just one of the unique features of the school.
Example #2.9
Initialization:
$('#galery34').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 4500,
animationType: 'backOutInLeft/backOutInRight',
hoverAnimation: true,
hoverAnimationType: 'bounce',
constSliderHeight: true,
overflowHidden: false,
})
Recent updates
@username Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
@username Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
@username Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Suggestions
Example #2.10
Initialization:
$('#galery35').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 5500,
animationType: 'bounceOut/bounceIn',
animationTime: 'animate__slow',
constSliderHeight: true,
overflowHidden: false,
})
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Example #2.11
Initialization:
$('#galery36').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 4500,
animationType: 'bounceOutInDown/bounceOutInUp',
constSliderHeight: true,
})
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Example #2.12
Initialization:
$('#galery37').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 7500,
animationType: 'bounceOutInLeft/bounceOutInRight',
animationTime: 'animate__slow',
hoverAnimation: true,
hoverAnimationType: 'rubberBand',
constSliderHeight: true,
})
Dawid Redman
Budget analyst
This school allowed me to push myself beyond what I thought I could even do and I have been able to make life-changing friendships with people around the world.
Misty Bain
Architect
I came last year as a high school freshman. It has been the most incredible experience of my life. I am happier than I ever could have imagined -- I have great friends who are not only super smart but also really compassionate people
Hester Tierney
Accountant
I love this school. It's not for everyone, given it's online. But even as an extrovert, I've found ways to still connect not only to the school community but also to others outside of school. Really pushes you to love learning and not just memorize facts, and it requires a lot of self-motivation and independence.
Example #2.13
Initialization:
$('#galery38').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 6000,
animationType: 'flipOutX/flipInX',
animationTime: 'animate__slow',
constSliderHeight: true,
})
Lorem ipsum dolor sit.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam voluptatem itaque.
Read more...
Lorem sit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum voluptatum repellendus.
Read more...
Amet consectetur.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam eius deleniti repellat.
Read more...Example #2.14
Initialization:
$('#galery39').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 6500,
animationType: 'flipOutY/flipInY',
animationTime: 'animate__slow',
constSliderHeight: true,
})
Example #2.15
Initialization:
$('#galery40').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 5500,
animationType: 'lightSpeedOutInLeft/lightSpeedOutInRight',
hoverAnimation: true,
hoverAnimationType: 'shakeX',
overflowHidden: false,
constSliderHeight: true,
control: false,
})
Marketing Communication
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nesciunt provident fugiat obcaecati at. Molestiae hic impedit, nobis debitis animi dolore nulla veniam excepturi voluptate amet placeat autem mollitia corrupti.
Cora Johnson
Free
Summer Kids
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit debitis assumenda dolorum ducimus dolorem saepe, tempore, eligendi quam illum officiis deleniti ullam, expedita officia corrupti quia nihil ea tempora laudantium.
Andrea Piacquadio
USD 45
Business & Management
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident doloribus libero iure nobis quaerat sapiente vitae fugiat dolore labore quis iusto officiis sed vel repellat, possimus dolorem voluptatibus nisi eos.Provident doloribus libero iure nobis quaerat.
Mark Willson
Free
Example #2.16
Initialization:
$('#galery41').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 5500,
animationType: 'rotateOut/rotateIn',
constSliderHeight: true,
})
Graphic & Web Design
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate harum tenetur commodisquam praesentium cupiditate consequatur odio molestiae? Animi natus dolorem qui laboriosam quia!
Ali Pazani
USD 80
Art of Business Negotiations
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sit molestiae tenetur ullam expedita maxime iusto eveniet. Labore hic, delectus inventore!
Mark Willson
USD 50
Social Media Management
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias adipisci perferendis officiis recusandae dolor ipsam dolorum dolores. Qui eos eaque consectetur molestiae, doloribus aspernatur nam excepturi ea atque beatae iste? Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias adipisci perferendis officiis recusandae dolor ipsam dolorum dolores.
Ali Pazani
USD 25
Example #2.17
Initialization:
$('#galery42').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 5000,
animationType: 'rotateOutInDownLeft/rotateOutInUpLeft',
hoverAnimation: true,
hoverAnimationType: 'shakeY',
constSliderHeight: true,
overflowHidden: false,
})
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example #2.18
Initialization:
$('#galery43').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 5000,
animationType: 'rotateOutInDownRight/rotateOutInUpRight',
constSliderHeight: true,
control: false,
})
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example #2.19
Initialization:
$('#galery44').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 6500,
animationType: 'hingeOut/fadeIn',
animationTime: 'animate__slower',
constSliderHeight: true,
})
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example #2.20
Initialization:
$('#galery45').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 6000,
animationType: 'bounceOut/jackInTheBox',
animationTime: 'animate__slow',
hoverAnimation: true,
hoverAnimationType: 'headShake',
constSliderHeight: true,
overflowHidden: false,
})
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example #2.21
Initialization:
$('#galery46').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 5000,
animationType: 'rollOut/rollIn',
hoverAnimation: true,
hoverAnimationType: 'swing',
constSliderHeight: true,
overflowHidden: false,
})
Alessia Dudley
Real Estate Agent
The teachers are experts in their subjects and their excitement about the material creates challenging and engaging classes for the students. But make no mistake, these are difficult classes!
Issac Wade
Bus Driver
It's been a wonderful experience, everything I wanted for my kids' education and the focus on their individual strengths make me so happy to see them grow and develop as I would want for them. Big difference from our public school experiences.
Adrienne Garza
Recreational Therapist
Incredible teachers that are invested in the students intellectual development. CORE curriculum is just one of the unique features of the school.
Example #2.22
Initialization:
$('#galery47').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 4500,
animationType: 'zoomOut/zoomIn',
animationTime: 'animate__fast',
constSliderHeight: true,
})
Recent updates
@username Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
@username Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
@username Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Suggestions
Example #2.23
Initialization:
$('#galery48').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 6000,
animationType: 'zoomOutInDown/zoomOutInUp',
animationTime: 'animate__slow',
hoverAnimation: true,
hoverAnimationType: 'wobble',
constSliderHeight: true,
})
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Example #2.24
Initialization:
$('#galery49').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 5500,
animationType: 'zoomOutInLeft/zoomOutInRight',
hoverAnimation: true,
hoverAnimationType: 'tada',
constSliderHeight: true,
overflowHidden: false,
control: false,
})
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Example #2.25
Initialization:
$('#galery50').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 7500,
animationType: 'slideOutInDown/slideOutInUp',
animationTime: 'animate__slower',
hoverAnimation: true,
hoverAnimationType: 'jello',
constSliderHeight: true,
})
Example #2.26
Initialization:
$('#galery51').animateCssSlider({
contentSrc: 'html',
autoplayInterval: 5500,
animationType: 'slideOutInLeft/slideOutInRight',
animationTime: 'animate__fast',
hoverAnimation: true,
hoverAnimationType: 'heartBeat',
constSliderHeight: true,
control: false,
})
Graphic & Web Design
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate harum tenetur commodisquam praesentium cupiditate consequatur odio molestiae? Animi natus dolorem qui laboriosam quia!
Ali Pazani
USD 80
Art of Business Negotiations
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sit molestiae tenetur ullam expedita maxime iusto eveniet. Labore hic, delectus inventore!
Mark Willson
USD 50
Social Media Management
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias adipisci perferendis officiis recusandae dolor ipsam dolorum dolores. Qui eos eaque consectetur molestiae, doloribus aspernatur nam excepturi ea atque beatae iste? Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias adipisci perferendis officiis recusandae dolor ipsam dolorum dolores.
Ali Pazani
USD 25