The background style does not seem to apply correctly when used in combination with ng-repeat within the

I am struggling to add a background to a div in an Ionic slider using ng-repeat and it's not working.

Here is the code I have tried:

Template

<ion-slide-box auto-play="true" does-continue="true" slide-interval="2000">
    <ion-slide ng-repeat="img in banners">
       <div class="box" ng-style="{'background': 'url('+img+') no-repeat top left'}"></div>
    </ion-slide>
</ion-slide-box>

Controller

$scope.banners = [
    "http://www.hdwallpapery.com/static/images/image5_170127819_PxgeF3V.jpg",
    "http://www.hdwallpapery.com/static/images/images_1_JbTP6rz.jpg"
];

I would appreciate any help in resolving this issue. Thank you!

Answer №1

To optimize the ion-slide functionality, my recommendation is to incorporate ng-style into ion-slide and apply a height of 100vh to .slider.

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide ng-repeat="slide in banners" ng-style="{'background': 'url('+slide+') no-repeat top left'}">
    <div class="box blue" ></div>
  </ion-slide>
</ion-slide-box>

Check out the live demonstration here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to make an image expand to fit the screen when clicked using HTML and CSS

Is there a way to make the images on this page grow to screen size when clicked, rather than extending past the boundaries of the screen? Currently, the images enlarge to twice their original size on click. How can I ensure that they expand responsively to ...

Delete the browsing cache in Internet Explorer from an external source

Currently, I am working on developing an ASP.NET application using Visual Studio. However, a persistent issue I am facing is that every time I launch the application, Internet Explorer caches certain CSS and JS files. This forces me to manually clear the c ...

Having trouble integrating dynamic CSS with Vue.js

Is there a way for me to apply dynamic styling based on the result within my div? I have created a function that calculates a total number and updates the data property to display either 'Low' or 'Good' depending on the count. I have ...

Ways to distort this shape using CSS?

I've been attempting to replicate this specific block layout, but I can't seem to get it right according to the design. Can anyone provide guidance on how to achieve it? Here is the desired block: https://i.stack.imgur.com/ud0HM.jpg Here's ...

Sending SQL information to an Angular interface using NodeJS

I'm struggling to figure out how to display data from a MySQL server using Node. Although I can successfully retrieve the data and log it in the CLI when running "node server.js", I am unsure of how to send this data to my Angular view. Console loggin ...

Having trouble submitting a date input form generated with vuejs on Safari browser

I am a huge fan of Vuejs and it's my go-to at work. The other day, I came across a rather perplexing scenario. If you have any insights into this, please do share. Here is the code in question: <script setup lang="ts"> import { ref ...

Errors with pointer events occurring within nested iframes on Chromium 78

At first glance, it seems like a bug specific to Chromium. I have already reported this issue in a bug report. Since progress is slow on that front, I am posting a question here primarily to see if anyone else has encountered similar or related issues and ...

The right alignment with Flexbox's justify content property is not being implemented as expected

I'm having trouble aligning my footer using flexbox - no matter what I try, it won't move all the way to the right. When I use justify-content: center, the items are centered, but when I change it to justify-content: right, everything shifts bac ...

Changing text content into objects in Protractor

I am facing an issue with a span tag that contains JSON text, which I need to convert into an object in Protractor for testing purposes. {"type":"msax-cc-error","value":[{"Code":22104,"Message":"Card holder is required"},{"Code":22058,"Message":"Card numb ...

After the form is submitted, the script is activated once more

Whenever I click the button that triggers an AJAX POST script multiple times, the script gets activated repeatedly. This results in items being created more than once. How can I solve this issue? $(document).delegate(".add_page_submit","click",fu ...

The content division does not have a set position

The content div is not adapting to different screen sizes properly. As the width and height of the browser shrink, it's overlapping with the header and footer. I'm using flex but I'm unsure if I'm implementing it correctly. display: ...

Generate an HTML table dynamically from a PostgreSQL query

I am facing a challenge that may be simple for experienced individuals but is proving to be difficult for me as a newbie. The task at hand involves retrieving JSON data from a database query and displaying it in an HTML table using Node.js, Express, and Po ...

Guide to setting up Nginx to host Rails application and Angular website on one domain

I am eager to configure Nginx to serve both my Rails application (using passenger) and an Angular front end. Essentially, any requests made to / should be routed to Rails, while requests to /admin/* should be directed to the Angular app. I stumbled upon ...

JavaScript for validating dimension text input has unique functionalities

I am looking for guidance on validating an ASP textbox using JavaScript. My goal is to validate a user's input in the format of 4-1/2, 80-1/2, 6/8, or simply 5. Only these types of patterns should be allowed, and each input must contain only one numbe ...

Initiate validation for all fields on Angular Form submission

I am currently using the following method for field validation on blur: http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview. While this method works well, I would like to extend it to also validate the fields when the user clicks the 'submit' but ...

Oops! Looks like we're encountering an issue where we cannot access the property 'subject' of a null

I am currently retrieving data from the Template collection in mongodb. However, I have encountered an issue where when I provide an incorrect templateName, the program fails to catch the error as expected. Instead, it continues running and I receive the e ...

Locating all elements on a webpage that are either above or below a specific element, capturing those that intersect visually

Is it possible to locate all the additional HTML elements that a particular element overlaps with, is positioned under, or intersects with? My goal is to ensure that this element is displayed above every other element. I am looking to identify all interse ...

Animation using jQuery is functional on most browsers, however, it seems to

After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...

If the <span> element contains text, then apply a class to the <i> element

Is there a way to target a different i element with the id 'partnered' and add the class 'checkmark'? $(document).ready(function () { jQuery('span:contains("true")').addClass('checkmark'); }); The current code su ...

Safari-exclusive: Google Maps API dynamically altering page aesthetics post-loading

Recently, I encountered a peculiar problem. Upon loading a page, the text displayed with full opacity. However, upon the Google Maps API loading after 2 seconds, the entire page's styling suddenly changed. It was as if the text on the page became less ...