[英]want to make a custom carousel like this don't know what this is called actually?
I am making a short website with movie recommendation I have created a rest API using python on heroku I am getting that response using ajax I am making a short website with movie recommendation I have created a rest API using python on heroku I am getting that response using ajax
$.ajax({
url: "MYURL?movie_name=" + movie,
method: "GET",
headers: {
"content-type": "application/x-www-form-urlencoded",
"Access-Control-Allow-Origin": "*"
},
crossDomain: true,
success: function(result) {
console.log("hey");
console.log(result);
res = JSON.parse(result);
}
});
this res["img"] and res["name"] contains the images and names of the movie这个 res["img"] 和 res["name"] 包含电影的图像和名称
How to create this type of carousel or what is this called is this carousel?如何创建这种类型的轮播或这叫什么是这个轮播?
I am new to frontend bootstraps我是前端引导程序的新手
Now I want to create a carousel like this with back as shadowed and less opacity with the mid photo as bright look现在我想创建一个像这样的轮播,背面有阴影,不透明度较低,中间照片看起来很亮
There is a jQuery gallery something like you want.有一个您想要的 jQuery 画廊。
Check Demo here: https://tympanus.net/Development/3DGallery/index2.html
在此处查看演示: https://tympanus.net/Development/3DGallery/index2.html
Download Source: https://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/
下载来源: https://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/
You can add href link and description below.您可以在下面添加 href 链接和说明。 Left and right images have css of opacity:1 in this example, which you can easily change to opacity:0.5 or some value you want.
在此示例中,左右图像具有不透明度:1 的 css,您可以轻松地将其更改为不透明度:0.5 或您想要的某个值。 Give it a try.
试试看。
Prepare your html something like;准备您的 html 之类的东西;
<section id="dg-container" class="dg-container">
<div class="dg-wrapper"></div>
<nav>
<span class="dg-prev"><</span>
<span class="dg-next">></span>
</nav>
</section>
Then, prepare html in your ajax success;然后,在你的 ajax 中准备 html 成功;
success: function(result) {
res = JSON.parse(result);
$.each(res, function() {
$('.dg-wrapper').append('<a href="YourVideoUrl">\
<img src="'+res["img"]+'" alt="'+res["name"]+'">\
<div>'+res["name"]+'</div>\
</a>');
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.