How to create a focus point for each image in the image slider for full screen display

I have a project in ASP.NET MVC core 1.1. I have an image slider with a carousel frame and a full-screen image slider is displayed, so when the screen goes to a mobile or tablet. it crop the image, but the display always remains fullscreen and works fine

Now my problem is with every image. I need a focal point, so this does not require a bit. I tried to introduce another plugin from

https://github.com/jonom/jquery-focuspoint

but it does not work. Do I need a focal point to define each image?

<div class="carousel-inner" role="listbox"> <div class="item active focuspoint" data-focus-x="0.5" data-focus-y="0.5" data-image-w="3200" data-image-h="2129"> <img src="~/images/SliderImages/1.jpg" data-color="green" alt="First-Image" /> <div class="carousel-caption" role="option"> <p> Learn how to build ASP.NET apps that can run anywhere. <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409"> Learn More </a> </p> </div> </div> 

I want to achieve the following behavior with the carousel image slider

http://jonom.imtqy.com/jquery-focuspoint/demos/full-screen/index.html

Research results;

https://responsive.io/docs

https://css-tricks.com/focusing-background-image-precise-location-percentages/

http://www.jqueryscript.net/layout/Responsive-Image-Cropping-jQuery-FocusPoint.html

https://css-tricks.com/perfect-full-page-background-image/

https://docs.imgix.com/tutorials/focal-point-cropping

0
jquery css responsive-design slider carousel
Sep 11 '17 at 15:41
source share

No one has answered this question yet.

See similar questions:

46
How to center image cropping (<img>) in a fluid-width container

or similar:

four
BBC.co.uk style jquery slider
one
Carousel Owl Height on Phone
one
JQuery Full Full Slider Slider or Full Screen Slider / Possible?
0
Responsive slider with full screen background
0
jQuery select an image and then crop it
0
How to combine image slider with image scaling?
0
JQuery slider with dynamic carousel
0
Adding different opacities to the โ€œactiveโ€ and โ€œinactiveโ€ shape classes
0
Full Screen Full Screen Full Screen
0
Convert a slider / carousel to a pager when switching from desktop to mobile.



All Articles