I use owl carousel in bootstrap. But when I use it in bootstrap modal, it does not work properly. How I solve this problem, please help me...
Here the code:
jQuery('.portfolio-modal-active').owlCarousel({
loop: true,
nav: false,
margin: 0,
dots: true,
animateOut: 'fadeOut',
touchDrag: false,
mouseDrag: false,
autoplay: true,
autoplayHoverPause: true,
autoplayTimeout: 4000,
smartSpeed: 2000,
responsive: {
0: {
items: 1,
}
}
})
Modal body is:
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="portfolio-modal-active">
<div class="portfolio-slider-item">
<img src="<?php echo get_template_directory_uri (); ?>/img/home-slider/slider_1.jpg" alt="Slider Image" />
</div>
<div class="portfolio-slider-item">
<img src="<?php echo get_template_directory_uri (); ?>/img/home-slider/slider_2.jpg" alt="Slider Image" />
</div>
</div>
</div>
</div>
</div>
Related
I'm trying to create a slider with react. I've an array of slides. I'm using useState to store the active slide and then updating it every 3 seconds with useEffect.
const [activeSlide, setActiveSlide] = useState(slides[2]);
useEffect(() => {
setTimeout(() => {
setActiveSlide((prevState) => slides[prevState.next]);
}, 5000);
}, [activeSlide]);
using active slide in jsx like so:
<h4 className='font-medium text-gray-600 dark:text-gray-200'>{activeSlide.desc}</h4>
I'm not sure how can I add a fade effect when slide is updating. any suggestions ?
If you are improving your CSS skills, please don't regard my suggestion. Otherwise, you can use Crousel from react-slick.
There is an example, code took from material-kit-react:
Import the react-slick:
import Carousel from "react-slick";
Define settings with autoplay:true and fade:true:
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
fade: true
};
The return function in material-kit-react:
return (
<div className={classes.section}>
<div className={classes.container}>
<GridContainer>
<GridItem xs={12} sm={12} md={8} className={classes.marginAuto}>
<Card carousel>
<Carousel {...settings}>
<div>
<img src={image1} alt="First slide" className="slick-image" />
<div className="slick-caption">
<h4>
<LocationOn className="slick-icons" />
Yellowstone National Park, United States
</h4>
</div>
</div>
<div>
<img
src={image2}
alt="Second slide"
className="slick-image"
/>
<div className="slick-caption">
<h4>
<LocationOn className="slick-icons" />
Somewhere Beyond, United States
</h4>
</div>
</div>
<div>
<img src={image3} alt="Third slide" className="slick-image" />
<div className="slick-caption">
<h4>
<LocationOn className="slick-icons" />
Yellowstone National Park, United States
</h4>
</div>
</div>
</Carousel>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
Just change it and ready to go. I wish that help you and save your time.
SwiperNoSwiping.mov
https://swiperjs.com/
I am having some trouble using Swiper. When I load in raw data to Swipe, the component swipes. However, if I were to pull data from an API, the component does not swipe until there is a change in the view: such as if I were to change the size of the window or click Inspect element. I cannot figure out has to do with the event loop and the view or if it is something to do with CSS.
I have provided a link to the video in order for you to see what I am saying.
My code:
event.component.html
<swiper fxFlex="auto" [config]="config">
<div *ngFor="let event of totalEvents" class="swiper-slide cursor-pointer">
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
<!-- Your content goes here -->
<mat-card class="example-card">
<mat-card-header>
<img src="{{event.image}}" style="max-width:30%;max-height:35%;">
<mat-card-title>{{event.eventName}}</mat-card-title>
<mat-card-subtitle>{{event.startDate}}</mat-card-subtitle>
<mat-card-subtitle>{{event.venue}} <br>
{{event.location}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>{{event.promoter}}</p>
<p>{{event.info}}</p>
<hr>
<p>$ {{event.price}}</p>
<button *ngIf="event.url"mat-raised-button color="basic">
Buy Ticket
</button>
</mat-card-content>
</mat-card>
</div>
</div>
</swiper>
<swiper fxFlex="auto" [config]="config">
<div *ngFor="let step of something" class="swiper-slide cursor-pointer">
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
<!-- Your content goes here -->
<mat-card class="example-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{step.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
</mat-card>
</div>
</div>
</swiper>
event.component.ts
totalEvents: any = [];
something = [{
name: 'Test1'
},
{
name: 'Test2'
}
];
/* cardSwipe */
index;
config: SwiperConfigInterface = {
effect: 'slide',
a11y: true,
direction: 'horizontal',
slidesPerView: 3,
slideToClickedSlide: true,
mousewheel: true,
scrollbar: true,
watchSlidesProgress: true,
navigation: true,
keyboard: true,
pagination: false,
centeredSlides: true,
loop: true,
roundLengths: true,
slidesOffsetBefore: 100,
slidesOffsetAfter: 100,
spaceBetween: 50,
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1
}
}
};
ngOnInit() {
this.fetchEvents();
}
I'm learning to use Swiper Sldier in a website using wordpress and Divi theme. I also try to follow a previous thread as a guide.
After following the instruction, the slider does not work, the imgage stuck at the left screen and it does not move as I drag them.
Here is the code on functions.php
/** Function SSwiper **/
function swiper_magic() {
wp_enqueue_script('swiper','https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js', array ('jquery'));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
add_action( 'wp_enqueue_scripts', 'swiper_magic' );
On my header:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script>
$(document).ready(function(){
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
jQuery('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
jQuery('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
})
</script>
And this is my HTML
<div class="device">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="/images/slider1-1.png"> </div>
<div class="swiper-slide"> <img src="/images/slider1-2.png"> </div>
<div class="swiper-slide">
<div class="content-slide">
<p class="title">Slide with HTML</p>
<p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
I don't know why it did not work.
Any help or general suggestions would be greatly appreciated...
Base on swiper demos, I suggest to put your script at the bottom. To work with swiper arrow button the easiest way are:
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
And your html would be:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Then, if you want to run the callback. Simply use:
swiper.on('slideChange', function () {
console.log('slide changed');
});
slideChange are the event depend how do you want to run the callback. See full swiper event and method
Use this for your php function
function swiper_magic() {
wp_enqueue_script('swiper','https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js', array ('jquery'), true); // true to load at the bottom after jquery
}
add_action( 'wp_enqueue_scripts', 'swiper_magic' );
Hope this help! ;)
I have a view (refer below code) , but the datetimepicker is stretching , now to removed the stretching. May be this is due to the bootstrap table . Need some guide to display the datetimepicker in the elegant way.
<div class="container">
<div class="clearfix"></div>
#using (Html.BeginForm("Create", "DoctorPayment"))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
#*<legend>DoctorPayment</legend>*#
<div class="panel">
<div class="panel-body">
...
<div class="row">
<div class="col-lg-3 pull-left">
<div class="editor-label">
#Html.LabelFor(model => model.PaymentDate)
</div>
</div>
<div class="col-lg-9">
<div class="editor-field">
#Html.EditorFor(model => model.PaymentDate)
#Html.ValidationMessageFor(model => model.PaymentDate)
</div>
</div>
<div class="col-lg-1">
</div>
</div>
<div style="margin-top: 5px"></div>
....
</div>
<p>
<input type="submit" value="Create" />
</p>
</div>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
....
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Styles.Render("~/Content/boostrap")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/cssjqryUi")
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
});
$('#PaymentDate').datepicker({
showButtonPanel: false,
beforeShow: function () {
$(".ui-datepicker").css('font-size', 12)
}
});
$("#PaymentDate").click(function () {
$("#ui-datepicker-div")
// BTW, min-width is better:
.css("min-width", $(this).outerWidth() + "px");
});
</script>
}
}
</div>
I have included bootstrap to it.
I believe that you might have overwritten something in css, or added some atributes.
Try this and see if it works.
$("#dropdown").closest("span.k-dropdown").width(400);
If it does, try to add a custom class to the datepicker so that you don't edit all dropdowns.
Also, changing the font size will change the size of the datepicker.
$('#PaymentDate').datepicker({
showButtonPanel: false,
beforeShow: function () {
$(".ui-datepicker").css('font-size', 12)
}
});
$("#PaymentDate").click(function () {
$("#ui-datepicker-div")
.css("max-width", $(this).outerWidth() + "px");
});
I am using ui-grid in angular which has 5 columns. on hover of grid options columns are getting expanded towards right side.
Here is my file.
HTML File
<div class="full-panle-body">
<div class="row user-view-grid" ng-show="gridOptions.data.length > 0 && userLoaded">
<div ui-grid="gridOptions" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ng-style="getTableHeight()"></div>
</div>
<div class="row loading-spinner" ng-hide="userLoaded">
<div class="col-xs-3"></div>
<div class="loading col-xs-6">
<span rel='spinner' class='data-spinner'></span>
<div class="loading-text">{{::'label.loading.user.list' | translate}}</div>
</div>
<div class="col-xs-3"></div>
</div>
<div class="no-records" ng-show="!numberRecordsFound && userLoaded">
{{:: 'text.search.no.records' | translate }}
</div>
</div>
<!-- html template for status -->
<script type="text/ng-template" id="statusCell-template.html">
<div ng-click="grid.appScope.onUserDetails(row.entity)" class="inner-data-cell-center">
<div style="text-align:center;">
<i class="fa fa-envelope-o" aria-hidden="true" style="color:grey;" ng-show="'added' == row.entity.registrationStatus.toLowerCase()"></i>
<i class="fa fa-envelope-o" aria-hidden="true" style="color:blue;" ng-show="'notified' == row.entity.registrationStatus.toLowerCase()"></i>
<i class="fa fa-check" aria-hidden="true" style="color:green;" ng-show="'complete' == row.entity.registrationStatus.toLowerCase()"></i>
</div>
<div style="text-align:center;" class="smaller-grey">{{row.entity.registrationStatus}}</div>
</div>
</script>
<script type="text/ng-template" id="name-template.html">
<div class="ui-grid-cell-contents" ng-click="grid.appScope.onUserDetails(row.entity)">
<div class="name-style">{{row.entity.lastName}}, {{row.entity.firstName}}</div>
<div class="email-style">{{row.entity.email}}</div>
</div>
</script>
<!-- html template for organization -->
<script type="text/ng-template" id="organization-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span class="dummy">{{row.entity.organization}}</span>
</div>
</script>
<!-- html template for username -->
<script type="text/ng-template" id="username-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span>{{row.entity.userName}}</span>
</div>
</script>
<!-- html template for Account Status -->
<script type="text/ng-template" id="accountstatus-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span ng-show="row.entity.isActive">Enabled</span>
<span ng-show="!row.entity.isActive">Disabled</span>
</div>
</script>
CSS File
.ui-grid-row:hover{
border-left: solid 6px #hoverBlue;
}
JS File
$scope.gridOptions = {
rowHeight: 60,
multiSelect: false,
enableColumnMenus: false,
enableEdit: false,
enableSoring: true,
columnDefs: [
{
name: 'registrationStatus',
width: "15%",
displayName: 'Status',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: 'statusCell-template.html'
},
{
name: 'lastName',
width: "30%",
displayName: 'Name',
headerCellClass: 'grid-header-left',
cellTemplate: 'name-template.html'
},
{
name: 'organization',
width: "15%",
displayName: 'Organization',
headerCellClass: 'grid-header-left',
cellTemplate: 'organization-template.html'
},
{
name: 'userName',
width: "20%",
displayName: 'Username',
headerCellClass: 'grid-header-left',
cellTemplate: 'username-template.html'
},
{
name: 'isActive',
width: "20%",
displayName: 'Account Status',
headerCellClass: 'grid-header-left',
cellTemplate: 'accountstatus-template.html'
}
]
};
Hi.I am using ui-grid in angular which has 5 columns. on hover of grid options columns are getting expanded towards right side.