relative;
}
.hvr__sectors {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
}
.hvr__sector {
object-fit: cover;
flex-grow: 1;
}
.images {
object-fit: cover;
display: flex;
overflow: hidden;
}
.image {
display: block;
width:100%;
object-fit: cover;
}
.hvr__dots {
display: flex;
align-items: center;
justify-content: center;
object-fit: cover;
}
.hvr__dot {
display:none;
object-fit: cover;
}
.hvr__images img {
min-width: 100%;
object-fit: cover;
}
</style>
<script>
jQuery(document).ready(function($) {
$(document).ready(function(){
$.fn.HvrSlider = function () {
return this.each(function () {
var el = $(this);
if (el.find('img').length > 1) {
var hvr = $('<div>', {
class: 'hvr',
append: [
$('<div>', {
class: 'hvr__images',
append: $('<div>', {
class: 'hvr__sectors',
}),
}),
],
insertAfter: el,
prepend: el,
});
var hvrImages = $('.hvr__images', hvr);
var hvrImage = $('img', hvr);
var hvrSectors = $('.hvr__sectors', hvr);
el.prependTo(hvrImages);
hvrImage.each(function () {
hvrSectors.prepend('<div class="hvr__sector"></div>');
});
var setActiveEl = function (el) {
hvrImage.hide().eq(el.index()).show();
};
$('.hvr__sector', hvrSectors).hover(function () {
setActiveEl($(this));
});
hvrSectors.on('touchmove', function (e) {
var position = e.originalEvent.changedTouches[0];
var target = document.elementFromPoint(position.clientX, position.clientY);
if ($(target).is('.hvr__sector')) {
setActiveEl($(target));
}
});
}
});
};
$('.images').HvrSlider();
});
});
</script>
<div <?php wc_product_class( 'card', $product ); ?>>
<?
//echo print_r($product);
try{
if($template_args){
//echo print_r($template_args);
}
} catch(Throwable $e) {
echo false;
exit;
}
$product_variation_id;
try{
$product_variation_id = $product->get_available_variations();
} catch(Throwable $e) {
;
}
$product_id = get_the_ID();
$product_url = $product->get_permalink();
?>
<a href="<?=$product_url?>">
<?php
$product = wc_get_product( get_the_ID() );
$image_id = get_post_thumbnail_id( $product_id );
$attachment_ids = $product->get_gallery_image_ids();
echo '<div class="images">';
foreach( $attachment_ids as $attachment_id ) {
echo $item;
echo '<img class="image" src="'.wp_get_attachment_url( $attachment_id, 'shop_single' ).'">';
}
echo '</div>';
?>
</a>
как сделать image object-fit:cover?
https://www.w3schools.com/css/css3_object-fit.asp
Обсуждают сегодня