php 滑动的滑块
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php 滑动的滑块相关的知识，希望对你有一定的参考价值。
.customnav {
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.swiper-button-vorige,.swiper-button-volgende{
svg path{
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in ;
-ms-transition: all 0.3s ease-in ;
-o-transition: all 0.3s ease-in ;
transition: all 0.3s ease-in ;
fill: #f4f4f4;
}
i{
font-size: 12px;
position: absolute;
}
.fa::before {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in ;
-ms-transition: all 0.3s ease-in ;
-o-transition: all 0.3s ease-in ;
transition: all 0.3s ease-in ;
color: #1e1e1e;
}
&:hover{
cursor: pointer;
svg path{
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in ;
-ms-transition: all 0.3s ease-in ;
-o-transition: all 0.3s ease-in ;
transition: all 0.3s ease-in ;
fill: #005c7f;
}
.fa::before {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in ;
-ms-transition: all 0.3s ease-in ;
-o-transition: all 0.3s ease-in ;
transition: all 0.3s ease-in ;
color: white;
}
}
position: relative;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-pagination{
position: relative;
margin: 0 20px;
.swiper-pagination-bullet{
background: url("../img/pagination.svg") no-repeat;
width: 17px;
height: 18px;
opacity: 1 ;
border-radius: 0;
&:not(:last-child){
margin-right: 10px;
}
}
.swiper-pagination-bullet-active{
background: url("../img/pagination-active.svg") no-repeat;
width: 17px;
height: 18px;
border-radius: 0;
}
}
}<?
if(get_post_meta($post->ID,'vacatures_sliderofafbeelding',true) == 'slider'):
$slides = get_post_meta($post->ID,'vacatures_slider',true);
?>
<div class="swiper-container">
<div class="swiper-wrapper">
<?
foreach ($slides as $slide){?>
<div class="swiper-slide"><img src="<?=$slide?>" alt=""></div>
<?}?>
</div>
<div class="customnav">
<div class="swiper-button-vorige">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
<img class="svg" src="<?=TEMPLATE_URL?>/assets/img/icon.svg">
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-volgende">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<img class="svg" src="<?=TEMPLATE_URL?>/assets/img/icon.svg">
</div>
</div>
</div>
<?
elseif (get_post_meta($post->ID,'vacatures_sliderofafbeelding',true) == 'afbeelding'):?>
<?
$afbeelding=get_post_meta($post->ID,'vacatures_afbeelding_id',true);
echo wp_get_attachment_image($afbeelding,array(710,320));
?>
<?
endif;
?>$meta_boxes['vacatures_opties'] = array(
'id' => 'vacatures_opties',
'title' => __( 'Opties', 'cmb2' ),
'object_types' => array( 'vacatures_posts', ), // Post type
'context' => 'normal',
'priority' => 'high',
'show_names' => true, // Show field names on the left
// 'cmb_styles' => true, // Enqueue the CMB stylesheet on the frontend
'fields' => array(
array(
'name' => 'Slider of afbeelding',
'id' => $prefix.'sliderofafbeelding',
'type' => 'select',
'options' => array(
'geen' => 'Geen',
'slider' => 'Slider',
'afbeelding' => 'Afbeelding'
),
),
array(
'name' => 'Slider',
'id' => $prefix.'slider',
'type' => 'file_list',
// 'preview_size' => array( 100, 100 ), // Default: array( 50, 50 )
// Optional, override default text strings
'text' => array(
'add_upload_files_text' => 'Kies slider foto(s)', // default: "Add or Upload Files"
'remove_image_text' => 'Haal foto weg', // default: "Remove Image"
'file_text' => 'Foto:', // default: "File:"
'file_download_text' => 'Download', // default: "Download"
'remove_text' => 'Verwijder', // default: "Remove"
),
'attributes' => array(
'required' => true, // Will be required only if visible.
'data-conditional-id' => $prefix.'sliderofafbeelding',
'data-conditional-value' => 'slider',
),
),
array(
'name' => 'Afbeelding',
'id' => $prefix.'afbeelding',
'type' => 'file',
'attributes' => array(
'required' => true, // Will be required only if visible.
'data-conditional-id' => $prefix.'sliderofafbeelding',
'data-conditional-value' => 'afbeelding',
),
),
),
);<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-volgende',
prevButton: '.swiper-button-vorige',
slidesPerView: 1,
autoHeight: true,
paginationClickable: true,
spaceBetween: 30,
loop: true
});
</script>$prefix = 'nieuws_';
//CONTACT PAGINA
$nieuws = new_cmb2_box( array(
'id' => 'nieuws',
'title' => __( 'Velden', 'cmb2' ),
'object_types' => array( 'post' ), // post type
'show_names' => true, // Show field names on the left
'priority' => 'high', // 'high', 'core', 'default' or 'low'
) );
$nieuws->add_field( array(
'name' => 'Koptekst',
'id' => $prefix . 'koptekst',
'type' => 'textarea_small',
) );
$nieuws->add_field( array(
'name' => 'Slider of afbeelding',
'id' => $prefix.'sliderofafbeelding',
'type' => 'select',
'options' => array(
'geen' => 'Geen',
'slider' => 'Slider',
'afbeelding' => 'Afbeelding'
),
));
$nieuws->add_field( array(
'name' => 'Slider',
'id' => $prefix.'slider',
'type' => 'file_list',
// 'preview_size' => array( 100, 100 ), // Default: array( 50, 50 )
// Optional, override default text strings
'text' => array(
'add_upload_files_text' => 'Kies slider foto(s)', // default: "Add or Upload Files"
'remove_image_text' => 'Haal foto weg', // default: "Remove Image"
'file_text' => 'Foto:', // default: "File:"
'file_download_text' => 'Download', // default: "Download"
'remove_text' => 'Verwijder', // default: "Remove"
),
'attributes' => array(
'required' => true, // Will be required only if visible.
'data-conditional-id' => $prefix.'sliderofafbeelding',
'data-conditional-value' => 'slider',
),
));
$nieuws->add_field( array(
'name' => 'Afbeelding',
'id' => $prefix.'afbeelding',
'type' => 'file',
'attributes' => array(
'required' => true, // Will be required only if visible.
'data-conditional-id' => $prefix.'sliderofafbeelding',
'data-conditional-value' => 'afbeelding',
),
));以上是关于php 滑动的滑块的主要内容，如果未能解决你的问题，请参考以下文章