Created
February 5, 2022 04:23
-
-
Save badasscodr/81c327aa7d725d19e49a337628cf2b04 to your computer and use it in GitHub Desktop.
slider-sigmawebstoe-issue by ali
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Slider = { | |
template: /* html */ ` | |
<div class="main-slider"> | |
<div class="splide__track"> | |
<ul class="splide__list"> | |
<li class="splide__slide" | |
v-for="(slide, index) in slides" | |
:key="index"> | |
<div class="hero-slide-item | |
slider-height | |
swiper-slide | |
d-flex bg-color1" | |
> | |
<div class="container align-self-center"> | |
<div class="row"> | |
<div class="col-xl-6 | |
col-lg-6 | |
col-md-6 | |
col-sm-6 | |
align-self-center | |
sm-center-view" | |
> | |
<div class="hero-slide-content"> | |
<h2 class="title-1 | |
helperbird-editor | |
medium-editor-element" | |
> | |
Best Handmade Goods | |
</h2> | |
<span class="price | |
helperbird-editor | |
medium-editor-element" | |
> | |
<span class="old | |
helperbird-editor | |
medium-editor-element" | |
> <del>$25.00</del> | |
</span> | |
<span class="new | |
helperbird-editor | |
medium-editor-element" | |
> - $18.00 | |
</span> | |
</span> | |
<a class="btn btn-primary m-auto text-uppercase"> | |
View Collection | |
</a> | |
</div> | |
</div> | |
<div class="col-xl-6 | |
col-lg-6 | |
col-md-6 | |
col-sm-6 | |
d-flex | |
justify-content-center | |
position-relative" | |
> | |
<div class="show-case"> | |
<div class=""> | |
<img src="assets/images/slider-image/slider-1.png" alt="" /> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
</div> | |
`, | |
data() { | |
return { | |
slidess: [], | |
slides: [ | |
{ | |
id: 1, | |
title: "Best Handmade Goods", | |
imageUrl: "../../assets/images/slider-image/slider-1.png", | |
newPrice: "$25.00", | |
oldPrice: "$18.00", | |
}, | |
{ | |
id: 2, | |
title: "Best Cotton", | |
imageUrl: "../../assets/images/slider-image/slider-2.png", | |
newPrice: "$25.00", | |
oldPrice: "$18.00", | |
}, | |
], | |
}; | |
}, | |
computed: {}, | |
mounted() { | |
this.fetchSlides(); | |
}, | |
methods: { | |
async fetchSlides() { | |
try { | |
const url = "https://fakestoreapi.com/products"; | |
const response = await axios.get(url); | |
this.slidess = response.data; | |
console.log(this.slidess); | |
} catch (error) { | |
if (err.response) { | |
// client received an error response (5xx, 4xx) | |
console.log("Server Error:", err); | |
} else if (err.request) { | |
// client never received a response, or request never left | |
console.log("Network Error:", err); | |
} else { | |
console.log("Client Error:", err); | |
} | |
} | |
console.log(this.slides); | |
}, | |
}, | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment