Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changed swiper version to most recent. #6

Merged
merged 4 commits into from
Aug 2, 2022
Merged

Changed swiper version to most recent. #6

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
04440d9
Changed swiper version to most recent.
erhanask Aug 2, 2022
dca663f
Code improvements.
erhanask Aug 2, 2022
0a78c88
More code improvements.
erhanask Aug 2, 2022
50f7593
More code improvements.
erhanask Aug 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions resources/css/detail.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -728,4 +728,23 @@
}
.tooltips:hover .tooltiptext {
visibility: visible;
}
.swiper-pagination{
position: initial !important;
overflow-x: auto;
}

.swiper-pagination .swiper-pagination-bullet {
width: max-content;
background: none;
height: fit-content;
}

.swiper-pagination img {
width: 70px;
}

.swiper-border {
border: 1px solid #e3e3e3;
border-radius: 5px;
}
85 changes: 51 additions & 34 deletions resources/views/ad-detail/partials/slider.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,55 @@
<div class="gg-product-img-area col-lg-5">
<div class="product__carousel mt-0">
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
{% if count(adv.files) == 0 %}
<div class="swiper-slide easyzoom easyzoom--overlay">
<a>
<img src="{{ img('visiosoft.module.advs::images/no-image.png').url }}" alt=""/>
</a>
</div>
{% else %}
{% for image in adv.getViewPhotoUrl %}
<div class="swiper-slide easyzoom easyzoom--overlay">
<a href="{{ image }}" data-lightbox="ads-image">
<img src="{{ adv.getMediumPhotoUrl(image) }}" class="swiper-lazy" alt=""/>
<div class="swiper-lazy-preloader"></div>
</a>
</div>
{% endfor %}
{% endif %}
</div>
</div>
<div class="swiper-container d-none d-md-block gallery-thumbs">
<div class="swiper-wrapper">
{% if count(adv.files) != 0 %}
{% for image in adv.getViewPhotoUrl %}
<div class="swiper-slide">
<img src="{{ adv.getMediumPhotoUrl(image) }}" alt="">
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
<div class="product__carousel mt-0">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
{% if count(adv.files) == 0 %}
<div class="swiper-slide">
<a>
muammertopcu marked this conversation as resolved.
Show resolved Hide resolved
<img class="w-100" src="{{ img('visiosoft.module.advs::images/no-image.png').url }}" alt=""/>
</a>
</div>
{% else %}
{% for image in adv.getViewPhotoUrl %}
<div class="swiper-slide">
<a href="{{ image }}" data-lightbox="ads-image">
<img class="swiper-border w-100" src="{{ adv.getMediumPhotoUrl(image) }}" alt=""/>
</a>
</div>
{% endfor %}
{% endif %}
</div>
<div class="swiper-pagination d-flex justify-content-start align-items-baseline"></div>
</div>
</div>
</div>
{{ asset_add("styles.css", "visiosoft.extension.gg_style_provider::css/lightbox.min.css") }}
{{ asset_add("scripts.js", "visiosoft.extension.gg_style_provider::js/lightbox.min.js") }}
{{ asset_add("scripts.js", "visiosoft.extension.gg_style_provider::js/swiper.js") }}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.2/swiper-bundle.min.css"
integrity="sha512-T3xwtELy3dqQUajk2sl4V6x/VnT+WbXgAKIu/Go7L6oDDWf4A5dJbG49vKn0am3dTNh/KHAbU2+4Ih2vVioxSg=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.2/swiper-bundle.min.js"
integrity="sha512-V1mUBtsuFY9SNr+ptlCQAlPkhsH0RGLcazvOCFt415od2Bf9/YkdjXxZCdhrP/TVYsPeAWuHa+KYLbjNbeEnWg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Initialize Swiper -->
{% if count(adv.files) != 0 %}
muammertopcu marked this conversation as resolved.
Show resolved Hide resolved
<script>
let paginationImages = [];
{% for image in adv.getViewPhotoUrl %}
paginationImages.push('{{adv.getMediumPhotoUrl(image)}}');
{% endfor %}
</script>
{% endif %}
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return '<div class="' + className + '">' + '<img class="swiper-border" src=' + paginationImages[index] + ' >' + "</div>";
},
},
});
</script>