Custom Responsive Carousel (Full Width)<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Custom styles to complement Tailwind *\/\n body {\n font-family: 'Inter', sans-serif;\n }\n\n \/* * Recommendation for WordPress:\n * This class breaks the element out of a standard, centered content container.\n * It sets the width to 100% of the viewport width (vw) and then uses\n * a transform to pull it back into the correct centered position,\n * effectively making it span the full width of the browser window.\n *\/\n .full-width-breakout {\n width: 100vw;\n position: relative;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .carousel-container {\n \/* This holds the carousel and clips the overflowing slides *\/\n overflow: hidden;\n position: relative;\n \/* Set height to 50% of the viewport height *\/\n height: 50vh;\n }\n\n .carousel-track {\n \/* This track holds all the slides in a single row *\/\n display: flex;\n height: 100%; \/* Ensure track fills the container height *\/\n transition: transform 0.5s ease-in-out;\n }\n\n .carousel-slide {\n \/* Each slide takes up the full width of the container *\/\n min-width: 100%;\n box-sizing: border-box;\n position: relative;\n background-color: #000; \/* Background for iframe\/placeholder slides *\/\n }\n\n .carousel-slide img {\n width: 100%;\n height: 100%; \/* Make image fill the container height *\/\n display: block; \/* Removes bottom space under image *\/\n object-fit: cover; \/* Cover the area without stretching\/distorting *\/\n }\n\n \/* Responsive iframe container *\/\n .iframe-container {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%; \/* Make iframe container fill the slide height *\/\n }\n\n .iframe-container iframe {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n border: none;\n }\n\n\n \/* Styling for the navigation buttons *\/\n .carousel-button {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n background-color: rgba(0, 0, 0, 0.5);\n color: white;\n border: none;\n cursor: pointer;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s ease;\n }\n\n .carousel-button:hover {\n background-color: rgba(0, 0, 0, 0.75);\n }\n\n .carousel-button--left {\n left: 16px;\n }\n\n .carousel-button--right {\n right: 16px;\n }\n\n \/* Styling for the navigation dots *\/\n .carousel-nav {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 10;\n }\n\n .carousel-indicator {\n border: none;\n cursor: pointer;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.5);\n transition: background-color 0.3s ease;\n }\n\n .carousel-indicator.current-slide {\n background-color: rgba(255, 255, 255, 1);\n }\n\n .text-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 1.5rem;\n background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\n color: white;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100\">\n\n \n <div class=\"w-full full-width-breakout\">\n \n <div class=\"carousel-container bg-white shadow-xl\">\n \n <div class=\"carousel-track\">\n \n <div class=\"carousel-slide\">\n <a href=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/beamont-port-arthur-texas-and-the-petrochemical-industry\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2024\/11\/port-arthur-texas-night-evening-eb26b8b31c634afc485088d6ee26cf7e-pickpik.jpg\" alt=\"Port Arthur, Texas at night\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/1200x675\/333\/fff?text=Image+Not+Found';\" class=\"w-full h-full object-cover\">\n <div class=\"text-overlay\">\n <p class=\"text-lg md:text-xl font-medium\">Port Arthur, Texas, a major American petrochemical center, at night. Featured here: witness seminars, a timeline,and oral histories on the history and environmental and climate justice in this city.<\/p>\n <\/div>\n <\/a>\n <\/div>\n \n <div class=\"carousel-slide\">\n <a href=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/mapping-sandys-inequalities\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block h-full\">\n <div class=\"flex h-full w-full\">\n <div class=\"w-1\/2 h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2024\/10\/NOAASuomiNPP_visible-October-29-2012.png\" alt=\"Hurricane Sandy from overhead\" class=\"w-full h-full object-cover\">\n <\/div>\n <div class=\"w-1\/2 h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2025\/09\/Screenshot-2025-09-11-at-4.39.15-PM.png\" alt=\"Sandy's Inequalities map\" class=\"w-full h-full object-cover\">\n <\/div>\n <\/div>\n <div class=\"text-overlay\">\n <p class=\"text-lg md:text-xl font-medium\">GIS Mapping of Environmental Inequities. Featured here: Schools Inundated by Superstorm Sandy Compared to Latino Populations, from the Project \u201cMapping Sandy\u2019s Inequalities\u201d<\/p>\n <\/div>\n <\/a>\n <\/div>\n \n <div class=\"carousel-slide\">\n <a href=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/minatitlan-general\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2025\/10\/IMG_9090.jpg\" alt=\"Witness Seminar in Minatitlan, Veracruz\" onerror=\"this.onerror=null;this.src='https.placehold.co\/1200x675\/333\/fff?text=Image+Not+Found';\" class=\"w-full h-full object-cover\">\n <div class=\"text-overlay\">\n <p class=\"text-lg md:text-xl font-medium\">Witness Seminars and Oral Histories Illuminating Community Members\u2019 Struggles for Environmental and Climate Justice. Featured here: Image from Witness Seminar held in Minatitlan, Veracruz, among Mexico\u2019s Most Important Refinery Centers<\/p>\n <\/div>\n <\/a>\n <\/div>\n \n <div class=\"carousel-slide\">\n <a href=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/front-page\/el-paso-and-its-smelter-overview-and-chronology\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2025\/09\/el-paso-smelter-el-paso-texas-nypl-b12647398-62792-0215a9-scaled.jpg\" alt=\"El Paso lead smelter postcard\" class=\"w-full h-full object-cover\">\n <div class=\"text-overlay\">\n <p class=\"text-lg md:text-xl font-medium\">Living and Working in a Lead Smelter Town: Timelines and Testimonials for El Paso, Texas, in the US and Avalos,Chihuahua, in Mexico<\/p>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n\n \n <button class=\"carousel-button carousel-button--left\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/><\/svg>\n <\/button>\n <button class=\"carousel-button carousel-button--right\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/><\/svg>\n <\/button>\n\n \n <div class=\"carousel-nav\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const initCarousel = (carousel) => {\n const track = carousel.querySelector('.carousel-track');\n if (!track) return;\n\n const originalSlides = Array.from(track.querySelectorAll('.carousel-slide'));\n const nextButton = carousel.querySelector('.carousel-button--right');\n const prevButton = carousel.querySelector('.carousel-button--left');\n const dotsNav = carousel.querySelector('.carousel-nav');\n\n if (originalSlides.length <= 1) {\n if(nextButton) nextButton.style.display = 'none';\n if(prevButton) prevButton.style.display = 'none';\n if(dotsNav) dotsNav.style.display = 'none';\n return; \/\/ No need for advanced carousel logic\n }\n\n \/\/ --- 1. CLONING FOR INFINITE LOOP ---\n const firstClone = originalSlides[0].cloneNode(true);\n firstClone.id = 'first-clone';\n const lastClone = originalSlides[originalSlides.length - 1].cloneNode(true);\n lastClone.id = 'last-clone';\n\n track.appendChild(firstClone);\n track.prepend(lastClone);\n\n const allSlides = Array.from(track.children);\n \n let slideWidth = allSlides[0].getBoundingClientRect().width;\n let currentIndex = 1; \/\/ Start at the first REAL slide\n let autoPlayInterval;\n let isTransitioning = false; \/\/ Flag to prevent spamming clicks\n\n \/\/ --- 2. INITIAL POSITIONING ---\n const setPosition = () => {\n track.style.transition = 'none';\n track.style.transform = `translateX(-${slideWidth * currentIndex}px)`;\n \/\/ Force browser to apply the style instantly\n track.offsetHeight; \n track.style.transition = 'transform 0.5s ease-in-out';\n }\n setPosition();\n\n \/\/ --- 3. DOTS & NAVIGATION ---\n dotsNav.innerHTML = '';\n originalSlides.forEach((_, index) => {\n const button = document.createElement('button');\n button.classList.add('carousel-indicator');\n if (index === 0) button.classList.add('current-slide');\n dotsNav.appendChild(button);\n });\n const dots = Array.from(dotsNav.children);\n\n const updateDots = () => {\n let realIndex;\n if (currentIndex === 0) { \/\/ On last clone\n realIndex = originalSlides.length - 1;\n } else if (currentIndex === allSlides.length - 1) { \/\/ On first clone\n realIndex = 0;\n } else {\n realIndex = currentIndex - 1;\n }\n\n dots.forEach((dot, index) => {\n dot.classList.toggle('current-slide', index === realIndex);\n });\n };\n \n const moveTo = (index) => {\n if (isTransitioning) return;\n isTransitioning = true;\n track.style.transform = `translateX(-${slideWidth * index}px)`;\n currentIndex = index;\n updateDots();\n }\n\n \/\/ --- 4. EVENT LISTENERS ---\n track.addEventListener('transitionend', () => {\n isTransitioning = false;\n if (allSlides[currentIndex].id === 'first-clone') {\n currentIndex = 1;\n setPosition();\n }\n if (allSlides[currentIndex].id === 'last-clone') {\n currentIndex = allSlides.length - 2;\n setPosition();\n }\n });\n \n nextButton.addEventListener('click', () => {\n moveTo(currentIndex + 1);\n startAutoPlay(); \/\/ Reset timer\n });\n\n prevButton.addEventListener('click', () => {\n moveTo(currentIndex - 1);\n startAutoPlay(); \/\/ Reset timer\n });\n\n dotsNav.addEventListener('click', e => {\n const targetDot = e.target.closest('button.carousel-indicator');\n if (!targetDot) return;\n const targetIndex = dots.findIndex(dot => dot === targetDot);\n moveTo(targetIndex + 1); \/\/ +1 because of the prepended clone\n startAutoPlay();\n });\n\n \/\/ --- 5. AUTOPLAY & RESIZE ---\n const advanceSlide = () => {\n moveTo(currentIndex + 1);\n };\n\n const startAutoPlay = () => {\n clearInterval(autoPlayInterval);\n autoPlayInterval = setInterval(advanceSlide, 8000);\n };\n\n window.addEventListener('resize', () => {\n slideWidth = allSlides[0].getBoundingClientRect().width;\n setPosition();\n });\n\n \/\/ --- INITIALIZE ---\n startAutoPlay();\n }\n\n \/\/ Find and initialize all carousels on the page\n const carousels = document.querySelectorAll('.carousel-container');\n carousels.forEach(initCarousel);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-a2ecc09a wp-block-group-is-layout-grid\">\n<div class=\"wp-block-group has-medium-font-size wp-container-content-ca36d4c3 is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-white-color has-text-color has-background has-link-color has-medium-font-size wp-elements-07a0ea30a515311f8a04d2f1bc849dbb wp-container-content-9cfa9a5a\" style=\"background-color:#b45302\">Environmental and climate dangers abound all around us–rampant pollution, intensifying storms and heat waves, nuclear meltdown, sea-level rise, mass extinctions\u2014yet some of us face far greater threats and impacts than others. The manifold inequities pervading modern societies, consolidated over past decades and more, ensure that most environmental and climate challenges are unequally borne. In other words, to wield words honed by generations of activists, scholars, and policy-makers, they are about environmental and climate justice.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group wp-container-content-bc2bfd5b is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-white-color has-luminous-vivid-amber-background-color has-text-color has-background has-link-color has-small-font-size wp-elements-2242fb68aa071a7110a11739ab6a40aa wp-container-content-9cfa9a5a\">This website offers a unique combination of resources for teaching and research in environmental and climate justice. It attends to basic concepts and definitions and provides guidance to the broad literatures these have spawned. It encapsulates the history of movements and writings out of which the modern understanding of environmental and climate justice first arose. It also includes searchable and downloadable collections of original documents that illuminate this history.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group wp-container-content-31d5e50b is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-black-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color has-small-font-size wp-elements-fdf955fde5bcb841d797c4a91f59fc2a wp-container-content-9cfa9a5a\">The core purpose of this website, however, is to publicly document and convey stories about environmental and climate justice that are more personal and local. Local communities, after all, are where the inequities of pollution or flooding literally hit home, often afflicting neighborhoods that are disadvantaged in other ways. This website began as a project to cull stories\u2014individual oral histories as well as collective witness seminars– of those whose lives have been lived in confrontation with select industrial and other environmental perils\u2014petrochemical complexes, lead smelters, asbestos mines, and nuclear plants. We have since expanded its coverage to include mapping projects that enable discernment of evolving socioeconomic as well as environmental inequities. That includes the local impacts and inequities of events intensifying through climate change, beginning with Superstorm Sandy. Our plan is to continue to build out the stories and other materials available on this website, though student projects developed through classes and course work at Stony Brook University.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-da7a6a80 wp-block-group-is-layout-grid\">\n<div class=\"wp-block-group has-vivid-cyan-blue-background-color has-background wp-container-content-b4c5012d is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-white-color has-vivid-cyan-blue-background-color has-text-color has-background has-link-color wp-elements-de7344aece9dcdace1698c67bc5b19e9 wp-container-content-9cfa9a5a\" style=\"font-size:11px\">FOR TEACHERS AND STUDENTS – Readings; Multimedia resources; Assignments; Lesson plans <br><br>FOR RESEARCHERS–Case studies; Oral histories; Witness Seminars; Mapping projects; Searchable document collections.<br><br><\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-vivid-red-background-color has-background is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-white-color has-text-color has-background has-link-color wp-elements-a1e215a75e871b38b69d94a0d51f1f8b wp-container-content-9cfa9a5a\" style=\"background-color:#560e7a;font-size:11px\">FOR MEMBERS AND ACTIVISTS OF FEATURED COMMUNITIES- Timelines; StoryMaps and Other Mapping; Oral Histories; Witness Seminars; Mapping Projects.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group wp-container-content-0a0139a5 is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-c0ca7d81 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-pullquote has-text-align-center has-white-color has-text-color has-background has-link-color has-medium-font-size wp-elements-5820510aad28591df35650160b297722\" style=\"border-width:5px;border-radius:37px;background:linear-gradient(135deg,rgb(122,220,180) 0%,rgb(75,165,134) 100%)\"><blockquote><p><em><strong>The manifold inequities pervading modern societies, consolidated over past decades and m<\/strong><\/em><strong><em>ore, ensure that most environmental and climate challenges are unequally borne<\/em>.<\/strong><\/p><\/blockquote><\/figure>\n<\/div>\n<\/div>\n\n\n<p style=\"font-size: 10px;\"><strong>[En espa\u00f1ol por Google Translate \u00e1 la derecha]<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Custom Responsive Carousel (Full Width) Port Arthur, Texas, a major American petrochemical center, at night. Featured here: witness seminars, a timeline,and oral histories on the history and environmental and climate justice in this city. GIS Mapping of Environmental Inequities. Featured here: Schools Inundated by Superstorm Sandy Compared to Latino Populations, from the Project \u201cMapping Sandy\u2019s…<\/p>\n","protected":false},"author":1,"featured_media":968,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"tags":[95],"class_list":["post-1056","page","type-page","status-publish","has-post-thumbnail","hentry","tag-front-page"],"_links":{"self":[{"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/pages\/1056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/comments?post=1056"}],"version-history":[{"count":129,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/pages\/1056\/revisions"}],"predecessor-version":[{"id":7350,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/pages\/1056\/revisions\/7350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/media\/968"}],"wp:attachment":[{"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/media?parent=1056"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/tags?post=1056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1056,"date":"2015-07-03T21:01:22","date_gmt":"2015-07-03T21:01:22","guid":{"rendered":"https:\/\/apps.tlt.stonybrook.edu\/wordpress\/disasters\/?page_id=1056"},"modified":"2026-03-26T22:42:26","modified_gmt":"2026-03-26T22:42:26","slug":"front-page","status":"publish","type":"page","link":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/","title":{"rendered":"Welcome\u2026"},"content":{"rendered":"\n\n\n\n \n \n Custom Responsive Carousel (Full Width)<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* Custom styles to complement Tailwind *\/\n body {\n font-family: 'Inter', sans-serif;\n }\n\n \/* * Recommendation for WordPress:\n * This class breaks the element out of a standard, centered content container.\n * It sets the width to 100% of the viewport width (vw) and then uses\n * a transform to pull it back into the correct centered position,\n * effectively making it span the full width of the browser window.\n *\/\n .full-width-breakout {\n width: 100vw;\n position: relative;\n left: 50%;\n transform: translateX(-50%);\n }\n\n .carousel-container {\n \/* This holds the carousel and clips the overflowing slides *\/\n overflow: hidden;\n position: relative;\n \/* Set height to 50% of the viewport height *\/\n height: 50vh;\n }\n\n .carousel-track {\n \/* This track holds all the slides in a single row *\/\n display: flex;\n height: 100%; \/* Ensure track fills the container height *\/\n transition: transform 0.5s ease-in-out;\n }\n\n .carousel-slide {\n \/* Each slide takes up the full width of the container *\/\n min-width: 100%;\n box-sizing: border-box;\n position: relative;\n background-color: #000; \/* Background for iframe\/placeholder slides *\/\n }\n\n .carousel-slide img {\n width: 100%;\n height: 100%; \/* Make image fill the container height *\/\n display: block; \/* Removes bottom space under image *\/\n object-fit: cover; \/* Cover the area without stretching\/distorting *\/\n }\n\n \/* Responsive iframe container *\/\n .iframe-container {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%; \/* Make iframe container fill the slide height *\/\n }\n\n .iframe-container iframe {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n border: none;\n }\n\n\n \/* Styling for the navigation buttons *\/\n .carousel-button {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n background-color: rgba(0, 0, 0, 0.5);\n color: white;\n border: none;\n cursor: pointer;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s ease;\n }\n\n .carousel-button:hover {\n background-color: rgba(0, 0, 0, 0.75);\n }\n\n .carousel-button--left {\n left: 16px;\n }\n\n .carousel-button--right {\n right: 16px;\n }\n\n \/* Styling for the navigation dots *\/\n .carousel-nav {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 10;\n }\n\n .carousel-indicator {\n border: none;\n cursor: pointer;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.5);\n transition: background-color 0.3s ease;\n }\n\n .carousel-indicator.current-slide {\n background-color: rgba(255, 255, 255, 1);\n }\n\n .text-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 1.5rem;\n background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\n color: white;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100\">\n\n \n <div class=\"w-full full-width-breakout\">\n \n <div class=\"carousel-container bg-white shadow-xl\">\n \n <div class=\"carousel-track\">\n \n <div class=\"carousel-slide\">\n <a href=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/beamont-port-arthur-texas-and-the-petrochemical-industry\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2024\/11\/port-arthur-texas-night-evening-eb26b8b31c634afc485088d6ee26cf7e-pickpik.jpg\" alt=\"Port Arthur, Texas at night\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/1200x675\/333\/fff?text=Image+Not+Found';\" class=\"w-full h-full object-cover\">\n <div class=\"text-overlay\">\n <p class=\"text-lg md:text-xl font-medium\">Port Arthur, Texas, a major American petrochemical center, at night. Featured here: witness seminars, a timeline,and oral histories on the history and environmental and climate justice in this city.<\/p>\n <\/div>\n <\/a>\n <\/div>\n \n <div class=\"carousel-slide\">\n <a href=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/mapping-sandys-inequalities\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block h-full\">\n <div class=\"flex h-full w-full\">\n <div class=\"w-1\/2 h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2024\/10\/NOAASuomiNPP_visible-October-29-2012.png\" alt=\"Hurricane Sandy from overhead\" class=\"w-full h-full object-cover\">\n <\/div>\n <div class=\"w-1\/2 h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2025\/09\/Screenshot-2025-09-11-at-4.39.15-PM.png\" alt=\"Sandy's Inequalities map\" class=\"w-full h-full object-cover\">\n <\/div>\n <\/div>\n <div class=\"text-overlay\">\n <p class=\"text-lg md:text-xl font-medium\">GIS Mapping of Environmental Inequities. Featured here: Schools Inundated by Superstorm Sandy Compared to Latino Populations, from the Project \u201cMapping Sandy\u2019s Inequalities\u201d<\/p>\n <\/div>\n <\/a>\n <\/div>\n \n <div class=\"carousel-slide\">\n <a href=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/minatitlan-general\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2025\/10\/IMG_9090.jpg\" alt=\"Witness Seminar in Minatitlan, Veracruz\" onerror=\"this.onerror=null;this.src='https.placehold.co\/1200x675\/333\/fff?text=Image+Not+Found';\" class=\"w-full h-full object-cover\">\n <div class=\"text-overlay\">\n <p class=\"text-lg md:text-xl font-medium\">Witness Seminars and Oral Histories Illuminating Community Members\u2019 Struggles for Environmental and Climate Justice. Featured here: Image from Witness Seminar held in Minatitlan, Veracruz, among Mexico\u2019s Most Important Refinery Centers<\/p>\n <\/div>\n <\/a>\n <\/div>\n \n <div class=\"carousel-slide\">\n <a href=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/front-page\/el-paso-and-its-smelter-overview-and-chronology\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block h-full\">\n <img decoding=\"async\" src=\"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/files\/2025\/09\/el-paso-smelter-el-paso-texas-nypl-b12647398-62792-0215a9-scaled.jpg\" alt=\"El Paso lead smelter postcard\" class=\"w-full h-full object-cover\">\n <div class=\"text-overlay\">\n <p class=\"text-lg md:text-xl font-medium\">Living and Working in a Lead Smelter Town: Timelines and Testimonials for El Paso, Texas, in the US and Avalos,Chihuahua, in Mexico<\/p>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n\n \n <button class=\"carousel-button carousel-button--left\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/><\/svg>\n <\/button>\n <button class=\"carousel-button carousel-button--right\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/><\/svg>\n <\/button>\n\n \n <div class=\"carousel-nav\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const initCarousel = (carousel) => {\n const track = carousel.querySelector('.carousel-track');\n if (!track) return;\n\n const originalSlides = Array.from(track.querySelectorAll('.carousel-slide'));\n const nextButton = carousel.querySelector('.carousel-button--right');\n const prevButton = carousel.querySelector('.carousel-button--left');\n const dotsNav = carousel.querySelector('.carousel-nav');\n\n if (originalSlides.length <= 1) {\n if(nextButton) nextButton.style.display = 'none';\n if(prevButton) prevButton.style.display = 'none';\n if(dotsNav) dotsNav.style.display = 'none';\n return; \/\/ No need for advanced carousel logic\n }\n\n \/\/ --- 1. CLONING FOR INFINITE LOOP ---\n const firstClone = originalSlides[0].cloneNode(true);\n firstClone.id = 'first-clone';\n const lastClone = originalSlides[originalSlides.length - 1].cloneNode(true);\n lastClone.id = 'last-clone';\n\n track.appendChild(firstClone);\n track.prepend(lastClone);\n\n const allSlides = Array.from(track.children);\n \n let slideWidth = allSlides[0].getBoundingClientRect().width;\n let currentIndex = 1; \/\/ Start at the first REAL slide\n let autoPlayInterval;\n let isTransitioning = false; \/\/ Flag to prevent spamming clicks\n\n \/\/ --- 2. INITIAL POSITIONING ---\n const setPosition = () => {\n track.style.transition = 'none';\n track.style.transform = `translateX(-${slideWidth * currentIndex}px)`;\n \/\/ Force browser to apply the style instantly\n track.offsetHeight; \n track.style.transition = 'transform 0.5s ease-in-out';\n }\n setPosition();\n\n \/\/ --- 3. DOTS & NAVIGATION ---\n dotsNav.innerHTML = '';\n originalSlides.forEach((_, index) => {\n const button = document.createElement('button');\n button.classList.add('carousel-indicator');\n if (index === 0) button.classList.add('current-slide');\n dotsNav.appendChild(button);\n });\n const dots = Array.from(dotsNav.children);\n\n const updateDots = () => {\n let realIndex;\n if (currentIndex === 0) { \/\/ On last clone\n realIndex = originalSlides.length - 1;\n } else if (currentIndex === allSlides.length - 1) { \/\/ On first clone\n realIndex = 0;\n } else {\n realIndex = currentIndex - 1;\n }\n\n dots.forEach((dot, index) => {\n dot.classList.toggle('current-slide', index === realIndex);\n });\n };\n \n const moveTo = (index) => {\n if (isTransitioning) return;\n isTransitioning = true;\n track.style.transform = `translateX(-${slideWidth * index}px)`;\n currentIndex = index;\n updateDots();\n }\n\n \/\/ --- 4. EVENT LISTENERS ---\n track.addEventListener('transitionend', () => {\n isTransitioning = false;\n if (allSlides[currentIndex].id === 'first-clone') {\n currentIndex = 1;\n setPosition();\n }\n if (allSlides[currentIndex].id === 'last-clone') {\n currentIndex = allSlides.length - 2;\n setPosition();\n }\n });\n \n nextButton.addEventListener('click', () => {\n moveTo(currentIndex + 1);\n startAutoPlay(); \/\/ Reset timer\n });\n\n prevButton.addEventListener('click', () => {\n moveTo(currentIndex - 1);\n startAutoPlay(); \/\/ Reset timer\n });\n\n dotsNav.addEventListener('click', e => {\n const targetDot = e.target.closest('button.carousel-indicator');\n if (!targetDot) return;\n const targetIndex = dots.findIndex(dot => dot === targetDot);\n moveTo(targetIndex + 1); \/\/ +1 because of the prepended clone\n startAutoPlay();\n });\n\n \/\/ --- 5. AUTOPLAY & RESIZE ---\n const advanceSlide = () => {\n moveTo(currentIndex + 1);\n };\n\n const startAutoPlay = () => {\n clearInterval(autoPlayInterval);\n autoPlayInterval = setInterval(advanceSlide, 8000);\n };\n\n window.addEventListener('resize', () => {\n slideWidth = allSlides[0].getBoundingClientRect().width;\n setPosition();\n });\n\n \/\/ --- INITIALIZE ---\n startAutoPlay();\n }\n\n \/\/ Find and initialize all carousels on the page\n const carousels = document.querySelectorAll('.carousel-container');\n carousels.forEach(initCarousel);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-a2ecc09a wp-block-group-is-layout-grid\">\n<div class=\"wp-block-group has-medium-font-size wp-container-content-ca36d4c3 is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-white-color has-text-color has-background has-link-color has-medium-font-size wp-elements-07a0ea30a515311f8a04d2f1bc849dbb wp-container-content-9cfa9a5a\" style=\"background-color:#b45302\">Environmental and climate dangers abound all around us–rampant pollution, intensifying storms and heat waves, nuclear meltdown, sea-level rise, mass extinctions\u2014yet some of us face far greater threats and impacts than others. The manifold inequities pervading modern societies, consolidated over past decades and more, ensure that most environmental and climate challenges are unequally borne. In other words, to wield words honed by generations of activists, scholars, and policy-makers, they are about environmental and climate justice.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group wp-container-content-bc2bfd5b is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-white-color has-luminous-vivid-amber-background-color has-text-color has-background has-link-color has-small-font-size wp-elements-2242fb68aa071a7110a11739ab6a40aa wp-container-content-9cfa9a5a\">This website offers a unique combination of resources for teaching and research in environmental and climate justice. It attends to basic concepts and definitions and provides guidance to the broad literatures these have spawned. It encapsulates the history of movements and writings out of which the modern understanding of environmental and climate justice first arose. It also includes searchable and downloadable collections of original documents that illuminate this history.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group wp-container-content-31d5e50b is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-black-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color has-small-font-size wp-elements-fdf955fde5bcb841d797c4a91f59fc2a wp-container-content-9cfa9a5a\">The core purpose of this website, however, is to publicly document and convey stories about environmental and climate justice that are more personal and local. Local communities, after all, are where the inequities of pollution or flooding literally hit home, often afflicting neighborhoods that are disadvantaged in other ways. This website began as a project to cull stories\u2014individual oral histories as well as collective witness seminars– of those whose lives have been lived in confrontation with select industrial and other environmental perils\u2014petrochemical complexes, lead smelters, asbestos mines, and nuclear plants. We have since expanded its coverage to include mapping projects that enable discernment of evolving socioeconomic as well as environmental inequities. That includes the local impacts and inequities of events intensifying through climate change, beginning with Superstorm Sandy. Our plan is to continue to build out the stories and other materials available on this website, though student projects developed through classes and course work at Stony Brook University.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-grid wp-container-core-group-is-layout-da7a6a80 wp-block-group-is-layout-grid\">\n<div class=\"wp-block-group has-vivid-cyan-blue-background-color has-background wp-container-content-b4c5012d is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading has-white-color has-vivid-cyan-blue-background-color has-text-color has-background has-link-color wp-elements-de7344aece9dcdace1698c67bc5b19e9 wp-container-content-9cfa9a5a\" style=\"font-size:11px\">FOR TEACHERS AND STUDENTS – Readings; Multimedia resources; Assignments; Lesson plans <br><br>FOR RESEARCHERS–Case studies; Oral histories; Witness Seminars; Mapping projects; Searchable document collections.<br><br><\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-vivid-red-background-color has-background is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p class=\"has-white-color has-text-color has-background has-link-color wp-elements-a1e215a75e871b38b69d94a0d51f1f8b wp-container-content-9cfa9a5a\" style=\"background-color:#560e7a;font-size:11px\">FOR MEMBERS AND ACTIVISTS OF FEATURED COMMUNITIES- Timelines; StoryMaps and Other Mapping; Oral Histories; Witness Seminars; Mapping Projects.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group wp-container-content-0a0139a5 is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-c0ca7d81 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-pullquote has-text-align-center has-white-color has-text-color has-background has-link-color has-medium-font-size wp-elements-5820510aad28591df35650160b297722\" style=\"border-width:5px;border-radius:37px;background:linear-gradient(135deg,rgb(122,220,180) 0%,rgb(75,165,134) 100%)\"><blockquote><p><em><strong>The manifold inequities pervading modern societies, consolidated over past decades and m<\/strong><\/em><strong><em>ore, ensure that most environmental and climate challenges are unequally borne<\/em>.<\/strong><\/p><\/blockquote><\/figure>\n<\/div>\n<\/div>\n\n\n<p style=\"font-size: 10px;\"><strong>[En espa\u00f1ol por Google Translate \u00e1 la derecha]<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Custom Responsive Carousel (Full Width) Port Arthur, Texas, a major American petrochemical center, at night. Featured here: witness seminars, a timeline,and oral histories on the history and environmental and climate justice in this city. GIS Mapping of Environmental Inequities. Featured here: Schools Inundated by Superstorm Sandy Compared to Latino Populations, from the Project \u201cMapping Sandy\u2019s…<\/p>\n","protected":false},"author":1,"featured_media":968,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"tags":[95],"class_list":["post-1056","page","type-page","status-publish","has-post-thumbnail","hentry","tag-front-page"],"_links":{"self":[{"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/pages\/1056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/comments?post=1056"}],"version-history":[{"count":129,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/pages\/1056\/revisions"}],"predecessor-version":[{"id":7350,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/pages\/1056\/revisions\/7350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/media\/968"}],"wp:attachment":[{"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/media?parent=1056"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/envirodangers.studies.stonybrook.edu\/wordpress\/envirodangers\/wp-json\/wp\/v2\/tags?post=1056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}