Hi I'm working on bootstrap carousal. I tried to show the multiple slide one by one on the arrow click. I have used some code and Somewhat it is working but not expected. I wanted to move only one image on click. But, here the whole image slide is moving. Please help me to move only one image on click. Thanks in advance.
$('#Carousel').carousel({
interval: 4000
})
$('#Carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
.dashboard-menu-wrapper {
display: none
}
.carousel-inner .active.left {
left: -10%;
}
.carousel-inner .next {
left: 10%;
}
.carousel-inner .prev {
left: -10%;
}
.carousel-control {
width: 4%;
}
.carousel-control.left,
.carousel-control.right {
background-image: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-12">
<div class="carousel slide" id="Carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#Carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
To achieve the desired result you can use a different carousel. I`ve been trying a lot do the same with bootstrap but could not achieve the result.
The OWL Carousel https://owlcarousel2.github.io work really easy with aligned elements...
See demo: https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html
try this.
$('#Carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
-> https://codepen.io/Not2Day2Die/pen/ddPbpE
Hope this help you
Related
I want to slide my image to left when click on the right arrow of the image slider. I cant apply the slide left animation.When click right arrow current image hide and next image is showing but not slide animation is happening
$('#image-content img:first').addClass('active');
//ON CLICK ON RIGHT ARROW DISPLAY NEXT
currentIndex = $('#image-content img').index(this) + 1;
$('.right-arrow').on('click', function() {
if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
currentIndex++;
$('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');
}
else {
currentIndex = 1;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active');
}
});
//ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
$('.left-arrow').on('click', function() {
if ($('#image-content img.active').index() > 0) {
currentIndex--;
$('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
} else {
currentIndex = $('#image-content img').length;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active')
}
});
#image-content{
height: 400px;
width: 100%;
}
#image-content img{
position: absolute;
height: auto;
width: auto;
max-height: 380px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none
}
#image-content img.active{
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-1 text-right nav-direction">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
</div>
<div class="col-9 text-center">
<!-- Main Images -->
<div id="image-content">
<!--(start foreach)-->
<img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid">
<!-- (end foreach)-->
</div>
<!-- End main Images-->
</div>
<div class="col-1 text-left nav-direction">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
</div>
</div>
I just want to slide it to left side.Currently working fine except animation.Help Please
There's another way for it. Use bootstrap:
div#myCarousel, div#myCarousel > div.carousel-inner, div#myCarousel > div.carousel-inner > div.item{
/* selector to edit divs */
}
div#myCarousel > div.carousel-inner > div.item > img{
/* selector to edit images */
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img class="img-responsive col-xs-12" src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
it's working like a charm
css seems to work, i think there's an issue on youor js.
$('#image-content img:first').addClass('active');
//ON CLICK ON RIGHT ARROW DISPLAY NEXT
currentIndex = $('#image-content img').index(this) + 1;
$('.right-arrow').on('click', function() {
if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
currentIndex++;
$('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');
}
else {
currentIndex = 1;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active');
}
});
//ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
$('.left-arrow').on('click', function() {
if ($('#image-content img.active').index() > 0) {
currentIndex--;
$('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
} else {
currentIndex = $('#image-content img').length;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active')
}
});
#image-content{
height: 400px;
width: 100%;
}
#image-content img{
position: absolute;
height: auto;
width: auto;
max-height: 380px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none;
transition: 1s;
}
#image-content img.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-1 text-right nav-direction">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
</div>
<div class="col-9 text-center">
<!-- Main Images -->
<div id="image-content">
<!--(start foreach)-->
<img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid">
<!-- (end foreach)-->
</div>
<!-- End main Images-->
</div>
<div class="col-1 text-left nav-direction">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
</div>
</div>
The best option to slide is moving content from out of page to in and the opposite for sliding-out object.
Currently the Carousel shows 3 images, which is great until mobile which I would like to display a single image which can be navigated through, can anybody edit my code or push me in the right direction to discover how it can be achieved
Here is the html:
<div class="container-fluid imageCarousel">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="container carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<img src="img/home-image1.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image2.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image3.png" class="img-responsive center-block">
</div>
</div>
<div class="item">
<div class="col-md-4">
<img src="img/home-image4.png" class="img-responsive center-block">
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next">›</a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div>
</div>
</div>
and here is the current JS:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-Carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
try setting the col values for all window sizes. An example would be col-sm-12 col-xs-12 for small windowed devices and col-md-12 col-lg-12 for larger windowed devices
I have a bootstrap carousel, when i resizing the page based on carousel-inner width I need to make multiple images within the single item(without for loop). carousel-inner width was dynamically generated when i resizing the page.
Actual Code :
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_flower1.jpg" alt="Chania">page 1
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">page 2
</div>
<div class="item">
<img src="img_flower3.jpg" alt="Flower">page 3
</div>
<div class="item">
<img src="img_flower4.jpg" alt="Flower">page 4
</div>
</div>
Expected Code :
<div class="item active">
<img src="img_flower1.jpg" alt="Chania">page 1
<img src="img_flower2.jpg" alt="Flower">page 2
</div>
<div class="item">
<img src="img_flower3.jpg" alt="Flower">page 3
<img src="img_flower4.jpg" alt="Flower">page 4
</div>
</div>
First you need to add responsiveness to your carousel items like this.
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12">
<a href="#">
<img src="http://placehold.it/500/fcfcfc/333&text=demo" class="img-responsive">
</a>
</div>
</div>
So that it gets adjusted as per new layout changes, small or medium screens.
Another option is to use another library for carousel. I would suggest have a look at slick. It has all the things you need.
For your scenario setting it is as simple as this.
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
If you want to use bootstrap carousel. Here is some sample code to test. Try opening in a full size window and then resize screen size.
$('.carousel[data-type="multi"] .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<4;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
.carousel-control { width: 4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
#media (max-width: 767px) {
.carousel-inner .active.left { left: -100%; }
.carousel-inner .next { left: 100%; }
.carousel-inner .prev { left: -100%; }
.active > div { display:none; }
.active > div:first-child { display:block; }
}
#media (min-width: 767px) and (max-width: 992px ) {
.carousel-inner .active.left { left: -50%; }
.carousel-inner .next { left: 50%; }
.carousel-inner .prev { left: -50%; }
.active > div { display:none; }
.active > div:first-child { display:block; }
.active > div:first-child + div { display:block; }
}
#media (min-width: 992px ) {
.carousel-inner .active.left { left: -16.7%; }
.carousel-inner .next { left: 16.7%; }
.carousel-inner .prev { left: -16.7%; }
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-center"><h3>Testing Carousel</h3></div>
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 col-sm-6 col-xs-12"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-2 col-sm-6 col-xs-12"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
I have an OwlCarousel with nav links within the first slide, is there a way to make the carousel return to the first slide after an event, be it a timer, or when the mouse moves out of the carousel?
Is it also possible to trigger the carousel with mousing over a link rather than clicking it?
Code snippet:
<div class="owl-carousel">
<div class="item" data-hash="slide0">
<ul>
<li><a class="button secondary url" href="#slide1">1</a></li><br/>
<li><a class="button secondary url" href="#slide2">2</a></li><br/>
<li><a class="button secondary url" href="#slide3">3</a></li><br/>
<li><a class="button secondary url" href="#silde4">4</a></li><br/>
<li><a class="button secondary url" href="#slide5">5</a></li><br/>
<li><a class="button secondary url" href="#slide6">6</a></li><br/>
</ul>
</div>
<div class="item" data-hash="slide1">
//some image
</div>
<div class="item" data-hash="slide2">
//some image
</div>
<div class="item" data-hash="slide3">
//some image
</div>
<div class="item" data-hash="slide4">
//some image
</div>
<div class="item" data-hash="slide5">
//some image
</div>
<div class="item" data-hash="slide6">
//some image
</div>
</div>
According the owlCarousel's docs you can use the to.owl.carousel function to slide to specific position.
Here is an example for both - going to the first slide (slides numbering starts with 0) and hover on the li elements to go to a specific slide on hover.
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({items:1});
$('#btn1').click(function() {
owl.trigger('to.owl.carousel', [0, 400]);
});
$('#ul1 li').hover(function() {
owl.trigger('to.owl.carousel', [parseInt($(this).text()) - 1, 400]);
});
});
body {
margin: 0;
padding: 0;
}
.owl-carousel .item {
height: 120px;
background: #4DC7A0;
padding: 1rem;
list-style: none;
margin: 10px;
text-align: center;
color: white;
font-size: 20px;
line-height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel">
<div class="item"> slide1 </div>
<div class="item"> slide2 </div>
<div class="item"> slide3 </div>
<div class="item"> slide4 </div>
<div class="item"> slide5 </div>
<div class="item"> slide6 </div>
<div class="item"> slide7 </div>
<div class="item"> slide8 </div>
<div class="item"> slide9 </div>
<div class="item"> slide10 </div>
<div class="item"> slide11 </div>
<div class="item"> slide12 </div>
</div>
<button id="btn1">Go to first</button>
<ul id="ul1">
<li>1</li>
<li>5</li>
<li>10</li>
</ul>
The below code is sliding one thumbnail at a time. I want to slide 3 at time. Can someone please help. Thanks!
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
The trick is to use bootstrap class "row".
jQuery
$('#myCarousel').carousel({
interval: 10000
})
html
<div class="col-md-7">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive">
</div>
<div class="col-md-4">
<img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
css
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
.carousel-control.left,.carousel-control.right {background-image:none; color: black;}
Hope it helps!